Programmatically trigger "select file" dialog box

html

responsive-design

web-development

best-practices

byNikita Barsukov·Sep 30, 2024

Invoke the file dialog with JavaScript by targeting a concealed <input type="file">:

<input type="file" id="fileInput" hidden>
<button onclick="document.getElementById('fileInput').click();">Open File Dialog</button>

The script commands a click event to the hidden file input upon the button press, which opens the file selection dialog box.

Operation behind the scenes: hidden but capable

Unlike display: none, the usage of the HTML5 global hidden attribute retains the functionality of the file input element—it remains part of the DOM and is responsive to scripting:

<input type="file" id="fileInput" hidden>
<!-- Can't see me but I can still pick files like a champ.-->

Spicing up UI/UX with style...literally

Customise the experience by linking a styled label element to the file input, then hide the original control:

<input type="file" id="fileInput" style="visibility: hidden; position: absolute; left: -9999px;">
<label for="fileInput" class="custom-button">Select File</label>
<!-- Who said file selectors can't be sexy? -->

This approach maintains native functionality wrapped within bespoke aesthetics.

Dancing with modern browsers

For modern browsers, window.showOpenFilePicker presents a promise-based API that provides extensive control:

async function openFilePicker() {
    try {
        const [fileHandle] = await window.showOpenFilePicker();
        // This ain't your grandpa's file picker
    } catch (error) {
        // Prepare for anything, even users with commitment issues
    }
}

Bear in mind, showOpenFilePicker may not be supported in some browsers (we're glaring at you, Safari). Test for cross-browser compatibility.

Proactively handling files

With the onchange event, detect file selection without delay:

<input type="file" id="fileInput" style="visibility: hidden;" 
       onchange="handleFiles(this.files)">
<!-- Waiting for the files to drop -->

In JavaScript, spring into action to process the files as soon as a user makes a selection:

function handleFiles(files) {
    for (const file of files) {
        const reader = new FileReader();
        reader.onload = (e) => {
            // Now let's see what's in this thing
        };
        reader.readAsText(file); // Adjust based on the file type, you aren't always reading Shakespeare
    }
}

Tricky bits & tips

Stick to invoking clicks on input elements within user-initiated event handlers, or risk running into browser no-nos.
Careful with async callbacks like AJAX! They might interrupt your beautiful input click triggers.
Remember to run tests for reliability and UX.
Limitations and security measures differ among browsers. For instance, watch out for Chrome 33 and beyond. (Spider senses tingling!)