How to apply MDL button style to a filePicker?

Question

I would like to know if there is a way to apply the Material Design Lite button style to a file picker, i.e. a component created on an HTML page via:

<input type="file" id="filePicker" />

I would like the "Browse" button of the component to have the look of a Raised button (with ripple if possible). See http://www.getmdl.io/components/#buttons-section.

Thanks!

score 6 · Answer 1 · answered Dec 11 '15 at 17:04

6

Using CSS, do you mean something like this?

<style>#file { display: none }</style>

<input type="file" id="file">
<label for="file" class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
  <i class="material-icons">+</i>
</label>

https://jsfiddle.net/sj838cLg/

answered Dec 11 '15 at 17:04

cotorusso

125
1
10

Thanks for your answer. The "problem" with your answer is that it hides the name of the file that has been chosen. I tried to remove the style but then we get the two buttons (original and styled one). FYI, I was more thinking about a rectangle button ( ) but it doesn't make any difference with regards to your anwer. – Renaud Tarnec Dec 13 '15 at 10:17
Maybe we can catch the selected file name in JS and display it in another placeholder below. – Renaud Tarnec Dec 13 '15 at 10:22
Yes it is possible, by combining your suggestion with the "label" tag for styling and the technique presented here http://www.html5rocks.com/en/tutorials/file/dndfiles/ in order to display the file list – Renaud Tarnec Dec 13 '15 at 10:41

score 2 · Answer 2 · answered Dec 29 '15 at 14:00

Currently, there's no "official" way of doing that. According to the discussion on this issue, the reason is that there's no Material Design specification for that component, so they don't have a guideline to style it. On that same page, the user kybarg provided a CSS/JavaScript code to style a file picker which kind of matches the Material Design specification, so you can use that code:

HTML:

<form>
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" />
    <label class="mdl-textfield__label">Name</label>
  </div>
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text"/>
    <label class="mdl-textfield__label">Position</label>
  </div>
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--file">
    <input class="mdl-textfield__input" placeholder="File" type="text" id="uploadFile" readonly/>
    <div class="mdl-button mdl-button--primary mdl-button--icon mdl-button--file">
      <i class="material-icons">attach_file</i><input type="file" id="uploadBtn">
    </div>
  </div>
</form>

CSS:

html {
  width: 100%;
}
body {
  background: #f5f5f5;
  margin: 50px auto;
  width: 512px;
}

.mdl-button--file {
  input {
    cursor: pointer;
    height: 100%;
    right: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 300px;
    z-index: 4;
  }
}

.mdl-textfield--file {
  .mdl-textfield__input {
    box-sizing: border-box;
    width: calc(100% - 32px);
  }
  .mdl-button--file {
    right: 0;
  }
}

JavaScript:

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.files[0].name;
};

But as there's no official specification, you probably won't find an official implementation from the MDL team for now.

How to apply MDL button style to a filePicker?

2 Answers2