forms – HTML input type=“file” in Google Chrome not showing popup window-ThrowExceptions

Exception or error:

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" />
How to solve:

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?

###

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.

###

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.

###

this worked for me

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

###

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.

###

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>

###

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>

Leave a Reply

Your email address will not be published. Required fields are marked *