In this article, we will learn how to programmatically fire click events on the input file element.
Approach: Whenever you want to perform a click event programmatically, at your specific condition, just use JavaScript in-built click() function by DOM object. For example:
document.getElementById('your_input_type_file_element_id').click();
Example 1: We want to click the input file element automatically (programmatically). When the user clicks one button which is not the ‘file upload’ button of the input type file element, we can achieve it by using the following code.Â
HTML
<!DOCTYPE html><html><script type="text/javascript">Â Â Â Â function open_file() {Â Â Â Â Â Â Â Â document.getElementById('input_file').click();Â Â Â Â }</script>Â
<body>    <input type="file" name="" id='input_file' hidden>    <button onclick="open_file()">        click event fire programmatically for input        type file element    </button></body></html> |
Output: The input file type is hidden so whenever you run this code, you easily get the select dialog for file selection. After clicking the above button, we get the file select dialog box like the one below the image. 
Example 2: For example, when a user registers for your service, it registers with email, username, password, etc. Whenever a user registers successfully you give them one secret key by email or SMS. The user enters this secret in the input box on a specific page after which they are able to choose document/ image whatever is needed for them.
HTML
<!DOCTYPE html><html><head>Â Â Â Â <script type="text/javascript">Â Â Â Â Â Â Â Â function open_file() {Â Â Â Â Â Â Â Â Â Â Â Â let secret_key = document.getElementById("secret_key").value;Â Â Â Â Â Â Â Â Â Â Â Â if (secret_key == "Geeksforneveropen") {Â
                // 'Geeksforneveropen' this value is just an example for                 // your understanding.                document.getElementById("input_file").click();            }        }    </script></head>Â
<body>Â Â Â Â <p>Write down 'Geeksforneveropen'</p>Â Â Â Â <label>Enter Secret Key :</label>Â Â Â Â <input type="text" name="username"Â Â Â Â Â Â Â Â Â Â Â id="secret_key"Â Â Â Â Â Â Â Â Â Â Â oninput="open_file()" />Â Â Â Â <input type="file" name="" id="input_file" hidden /></body></html> |
Output: After entering the correct secret key into the input box, the file select dialog box will pop up. AJAX request is generated and it matches that user key to the original key via backend files.
