Material-design-lite: Feature: Support style for file input fields

[Twaldigas]

Currently only text input fields will be styled. It would be great to support the styling of file input fields.

If you decide not to support this, than no styling should be done. Because currently it will be styled and the label is over the uplaod button.

[Garbee]

The textfield styling is for just that, textual inputs. You shouldn't be using it for file inputs. As far as I know we don't have any MD guidance for that. So let's handle finding it in the spec or getting it specified first, then we can tackle introducing it to core.

[kybarg]

@Twaldigas Designed this for you http://codepen.io/kybarg/pen/PqaOOg

[Twaldigas]

@Garbee
Sounds good. Thank you.

@kybarg
Looks great. Thank you.

[kevyworks]

@kybarg Pull request to mdl possible?

[kybarg]

@triplekdev thanks, but I'm not sure if this meets MD guidance.

[peluprvi]

Gmail, Hangout and other Google apps use some icon button (like "attach file" or "atachment" icons) to do this action. But each app shows differently the attached file (showing only the file name or the full image).

Edit: Take a look on bottom-sheets

[surma]

MD doesn’t have an explicit spec for this, but the official advice is to use a regular icon button and a label.

[julmot]

Therefore MD should create this button and a label instead of showing the native file input.

[Gixx]

If you guys are still interested in such input, please check my solution: https://github.com/Gixx/mdl-components-ext/tree/master/src/file

[sailorseashell]

Any updates on this? I think this would be a great addition to the library.

[manish153]

Looking for something similar.. looks like no updates on this front

[osechet]

I'm a little bit surprised by the same answer that appears in a lot of issues: "It's not in MD specs, so we don't do". IMHO, MD specs are not supposed to describe all the use cases in the world. They may never describe how to deal with a file input (and I guess they will never since file input is HTML specific).
When people uses a library such as MDL, they don't want to have to reinvent the wheel. When they use a file input, they want it to be styled automatically. How this is done is a choice that has to be done by MDL, following MD specs.

[Gixx]

In this case, feel free to try my MDL Component Extensions: http://mdl.gixx-web.com/components-ext.html

[Garbee]

IMHO, MD specs are not supposed to describe all the use cases in the world.

In order to be a "Material Design" implementation, you _can't_ stray from the spec. Otherwise it isn't Material Design by the Design Teams' standards. We understand this is a frustrating concept, but it is what we are bound by in order to try and be a reference implementation of the specification.

The entire goal is to keep our scope specific to what MD specifies. That keeps what we are doing maintainable and easy to tell if something is a right/wrong situation.

[Joshfindit]

If MDL is going to stick to the spec, and MD does not address file upload, the next question is:

How does the spec get revised to include it?

It's easy to see where the spec is coming from, but for now the world still uploads files.

[Garbee]

The request is on the MD teams backlog of things to look at. They are getting requests from many different groups within Google and external places. Smallish teams + large queues of work = slow/random output that is non-deterministic. All we can do is be patient until the MD team provides us with _some_ kind of guidance here, either directly to our core team at MDL or by updating the specification to include this pattern.

[halvardos]

The easiest way of getting a nicely formatted button for file-upload.
(although not with a lot of bells and whistles)
Do this:

  <label class="mdl-button mdl-button--colored mdl-js-button mdl-button--raised mdl-js-ripple-effect">
      Browse <input type="file" style="display: none;">
  </label>

[sfdexter]

Superceded by https://github.com/material-components/material-components-web/issues/61