Esto es un problema que ocurre porque el código HTML no es válido. En la definición de HTML se indica que el contenido dentro de un botón puede ser:
Phrasing content, but there must be no interactive content descendant.
Es decir, contenido de tipo frase, pero que no sea interactivo. Y dentro de contenido interactivo se incluyen (entre otros): a
, button
, select
o input
que no sea hidden
(enfasis añadido por mí):
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)
En tu código incluyes un form
y un input
de tipo file
dentro de un button
que hace que el código no sea válido, entonces cada navegador lo interpretará como pueda. Chrome e IE lo interpretan de una manera que a ti te gusta y Firefox de una que no te gusta... pero podría ser de otra manera.
Una manera de solucionar el problema es hacer que el código sea válido:
- moviendo el formulario fuera,
- añadiendo un
id
al input del fichero, y
- cambiando el
button
por un label
que apunte al input
(con un for
).
Entonces el código será válido y funciona en todos los navegadores:
<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">
</label>
</form>