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