This is a problem that occurs because the HTML code is not valid. The HTML definition indicates that the content inside a button can be :
Phrasing content, but there must be no interactive content descendant.
That is, content of phrase type, but that is not interactive. And within interactive content include (among others):
input other than
hidden (emphasis added by me):
Interactive content is content that is specifically intended for user interaction.
- a (if the href attribute is present), audio (if the controls attribute is present), button, details, embed, iframe, img (if the usemap attribute is present), input (if the type attribute is not in the hidden state) , keygen, label, object (if the usemap attribute is present), select, textarea, video (if the controls attribute is present)
In your code you include a
form and a
input of type
file within a
button that makes the code is not valid, then each browser will interpret it as it can. Chrome and IE interpret it in a way that you like and Firefox that you do not like ... but it could be otherwise.
One way to solve the problem is to make the code valid:
- moving the form out,
- adding a
id to the input of the file, and
label pointing to
Then the code will be valid and works in all browsers:
<form method="POST" action="http://timeline.dev/post/ajaxupload" accept-charset="UTF-8" class="x-uploader" enctype="multipart/form-data">
<label data-upgraded=",MaterialButton" class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored f-left" for="file">
<i class="material-icons ">cloud_upload</i>
<input name="_token" value="3kpNrTDVx59bdv1KqB8x4HNbftxdDC1TpIjpNgeX" type="hidden">
<input name="file" type="file" id="file">