Why file input inside a button doesn't work in Firefox but works in Chrome?

Question

I have a simple HTML document with the following code:

<form method="post" action="/upload_file" enctype="multipart/form-data" id = "fileForm">
    <button id="chooseFileButton">
        Choose File
        <input id="fileInput" type="file" name="file" accept="application/vnd.ms-excel"/>
    </button>
    <button id="uploadFileButton" type="submit">Upload File</button>
</form>

<style>
#fileInput {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
}
</style>

So here file input is hidden and is inside of the button. Now in Google Chrome when I click the button it opens file dialog as I want. But in Firefox it tries to navigate to the URL in form's action attribute. How I can make Firefox to behave with my HTML like Chrome does? What is the reason of Firefox behaving like this?

score 2 · Accepted Answer · answered Nov 21 '17 at 12:20

It's because what you are trying to do is not actually valid HTML. Why not make the fileinput look like a button with a div?

You are not allowed to have a fileinput inside a Button Tag

Like this:

.buttonExample {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

<div class="buttonExample">Upload button
    <input type="file" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;"></input></div>

Just a note that the input is one of the few "void elements". Meaning, you do not need to close the input tag "" like you do with the div tag or other various elements. — Dawson Irvine, Feb 07 '19 at 00:11

Why file input inside a button doesn't work in Firefox but works in Chrome?

1 Answers1