You are here

1 July 2016
Since there is no File Upload form functionality in MDL, we need to create some css, html and js. I have tried to make it as simple as possible.

CSS

Source code viewer
  1. .mdl-button--file input {
  2. cursor: pointer;
  3. height: 100%;
  4. right: 0;
  5. opacity: 0;
  6. position: absolute;
  7. top: 0;
  8. width: 300px;
  9. z-index: 4;
  10. }
  11. .mdl-textfield--file .mdl-textfield__input {
  12. box-sizing: border-box;
  13. width: calc(100% - 32px);
  14. }
  15. .mdl-textfield--file .mdl-button--file {
  16. right: 0;
  17. }
Programming Language: CSS

HTML

Source code viewer
  1. <div class="mdl-textfield mdl-js-textfield mdl-textfield--file">
  2. <input class="mdl-textfield__input" placeholder="No file chosen" type="text" id="TEXT_ID" readonly />
  3. <div class="mdl-button mdl-button--icon mdl-button--file">
  4. <i class="material-icons">attach_file</i>
  5. <input type="file" name="NAME" id="ID" onchange="document.getElementById('TEXT_ID').value=this.files[0].name;" />
  6. </div>
  7. </div>
Programming Language: HTML