HTML input type=“file” in Google Chrome not showing popup window

Question

I'm having a problem with the HTML tag <input type="file" /> in Google Chrome.

The 'Browse' button appears on the page as expected, but when I click it in order to select a file, the pop-up dialog window from the browser doesn't open at all.

I 've tested my form and in Firefox and works correct. Any ideas what's wrong and how can I fix it?

Here is also the code:

<form action="" method="post" accept-charset="utf-8" enctype="multipart/form-data">
<label for="imgfile">File input</label>
<input type="file" name="imgfile" />

Answer 1

This happened to me on Chrome v88.0, and I tried everything -- removing all the event handlers, making the simplest form possible, removing all other html and js from the page -- and still the file-selection dialog would not appear when clicking the "Choose File" button.

Then I shut down Chrome and re-opened it ... and it worked again.

Golden advice:

Have you tried turning it off and on again?

Answer 2

In my case the problem was as follows :

1. Whole document had a "on click handler"

2. Inside click hander, the code was canceling all propagation with

   return false;

Removing this return statement solved problem with input=file.

Answer 3

There's no reason that this shouldn't work in Chrome. Have you tried copying JUST the mark up in the example you've given us into a HTML file, and opening that? Does it work? It should, unless there's some third party plugin or extension stopping it.

It may be that you have have mark up elsewhere causing this issue; perhaps a layer over the input field catching the click event before it can make it's way down to the "browse" button?

Answer 4

I knew the problem wasn't an issue with the specific web page I was currently browsing because I went to codepen and tried various file uploaders to no avail.

In my specific scenario, I had run a chrome update a few days ago but failed to relaunch chrome after the update.

Navigating to Help > About Google Chrome, Google had informed me that a relaunch was necessary.

After relaunch, the browser native file picker started appearing again.

Answer 5

I had the same issue, it would work in safari but not chrome. Turns out I just needed to update my chrome browser. Apparently if your chrome version is out of date by two weeks functionality that has been around for over a decade breaks...you know google engineering at its finest...

Answer 6

There could be two reasons for the input type file not working.

1. The file type input is styled as visibility: hidden. To hide the input use opacity:0.
2. There may be click event on document or parent element resisting click on input tag.

Answer 7

It seems that a plugin (Colorzila), that I had installed on Chrome, was stopping it. I deactivated it, restart the Chrome and worked eventually.

Answer 8

In my case, vendor css was having a default CSS written to hide the input type file to display: none, as shown below, removing that/overriding that, made browse to work as expected. Hope it may help, that to verify if css for input[type='file'] is driven from other places.

//remove the below code
input[type="file"] {
 display: none;
}

Answer 9

I had same issue recently. Restarting chrome fixed it. Go to chrome://restart to do it.

Answer 10

这对我有用

<input type="file" id="fileProfile2" name="fileProfile2"  accept="image/png,image/jpeg"  ></input>

Answer 11

I had a similar issue where I was hiding the input element and trying to trigger the popup when a user clicked on the form label.

In my case, the for attribute on the label element didn't match the id of the input. Once I updated the for on the label to match the input's id the popup window worked great.

Simple Example:

  <form>
    <label for="images">Click here to upload your images!</label>
    <input id="images" type="file" accept="images/*" style="display:none;" />
  </form>

I found it difficult to style the input itself, so I hid the actual input element and styled the label to look like a file upload input.

Now whenever someone clicks on the label element the file popup will appear even though the input element is hidden.

Answer 12

我在 ajax 请求中设置了 event.preventDefault() 这就是为什么输入值没有在表单数据中发送

Answer 13

I had a global event event listener on window :

window.addEventListener("click", event => {
        event.preventDefault();
        event.stopPropagation();
});

Of course this was stopping my input from reacting. Be careful with global or local listeners that do preventDefault()

Answer 14

My device is Macbook air Montery, I've faced the same issue. I've just closed the browser (google chrome) and reopened it , the issue was fixed!!

Answer 15

happened to me when trying to upload a 2GB file locally (eg Photos Library.photoslibrary )

Answer 16

You must use it like this

    <form enctype="multipart/form-data">
    .......
    .......
    <label for="imgfile">File input</label>
    <input type="file" name="imgfile" />
    <input type="submit" name="submit" value="submit" />
    </form>

Answer 17

Hope it helps someone; in my case the issue was that I had event.preventDefault() applying to the whole document, because I had my eventListener applying to the whole document:

 function onMouse( event ) { event.preventDefault(); // calculate mouse position in normalized device coordinates // (-1 to +1) for both components mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; mouseEventHandler( event ); } document.addEventListener( 'click', onMouse, false );

I only wanted my custom event handlers to apply to one div, not to the whole document, and specifically I didn't want my event handlers overriding the form events, set up in another div. So I limited the scope of my eventListeners to the 'visualizationContainer' div:

document.getElementByID('visualizationContainer').addEventListener( 'click', onMouse, false );

That fixed everything.

Answer 18

Observed Symptoms: The "Choose File" button (from the input type=file html tag) does not pop a file selection dialog. Same web page works on Firefox (version 68.5.0) on the same device.

Answer: Use Firefox on Android if the failure to select a file for upload symptoms appear. The code below does work on Linux Chrome (version 80.0.3987.87). It also works on Windows 10 Chrome (version 80.0.3987.122). This seems to only apply to Android and likely only certain versions.

Hardware: LG-H812 Android version: 6.0 Chrome version: 80.0.3987.117

Code:

<!DOCTYPE HTML>
<html lang = "en">
    <head>
        <title>t9.php</title>
    </head>

    <body>
        <h1>t9.php</h1>

        <form method='post' enctype='multipart/form-data'>
            <input type='file' name='filename'/><br>
            <br>
            <input type='submit' name='submit' value='submit'/><br>
            <br>
        </form>
    </body>
</html>