ARTICLE AD BOX
This is part of a larger project, but I've boiled it down to the minimal example that shows my problem.
I'm trying to define a div where a click anywhere in the div causes a file chooser popup. I've also included the file chooser inside the div. Javascript receives clicks in the div and launches the file chooser in response.
For the div itself, it works perfectly. But if I click on the actual file chooser, I get File chooser dialog can only be shown with a user activation.
Why am I getting this message when I am opening the chooser as a result of a user activation. And why when I click on the file chooser but not when I click on the div?
I tried passing the click to the file chooser instead of calling showPicker() , but it got even weirder. Now the div gets two clicks in rapid succession, with the second one having the detail field (click count) at zero on the second notification.
When I click on the file chooser this time, I don't get the warning message, but the file chooser pops up twice. I assume that's because passing the click to it caused the click to come around again. I didn't pursue this too hard since I believe showPicker() was the right way to do it.
Now I know that I can just ignore the warning and everything works just fine, but I prefer not to ignore warnings unless I know why I'm ignoring them.
The html:
<!DOCTYPE HTML> <html lang="en"> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> <META name="viewport" content="width=500, initial-scale=1"> <title>A simple test</title> <script type="text/javascript" src="tools.js"></script> </head> <body> <form> <div id="click-area" style="max-width: 5in; padding: 20px; border: 2px dashed #ccc; text-align: center;"> <p>click to select</p> <input type="file" id="fileInput" name="fileInput"> </div> </form> <script language="JavaScript"> <!-- setupClick(); --> </script> </body> </html>The javascript:
/** Handle click */ var clickArea; function setupClick() { const clickArea = document.getElementById('click-area'); const fileInput = document.getElementById('fileInput'); // Handle clicks; launch the file chooser console.log("Registering event listener") clickArea.addEventListener('click', (e) => { console.log("clickarea event: " + e + ", type=" + e.type + ", which=" + e.which + ", detail=" + e.detail); e.stopPropagation(); //fileInput.click(); fileInput.showPicker(); }); }The console output:
Registering event listener tools.js:12 clickarea event: [object PointerEvent], type=click, which=1, detail=1 index.html:1 File chooser dialog can only be shown with a user activation.