How to open a select file dialog via js?

javascript

file-reader-api

file-input

javascript-features

byNikita Barsukov·Jan 25, 2025

Your life is about to get much easier. This is how we turn a simple piece of JavaScript into a file select dialog. We're creating an invisible input element with type=file and trigger a click. Magic? Nah, just coding.

// Born to be wild invisible input, say Cheese!
const inputElement = document.createElement('input');
inputElement.type = 'file';
inputElement.style.display = 'none'; 
document.body.appendChild(inputElement);

// Behold the click of destiny!
inputElement.click(); 

// We've got something to show off
inputElement.onchange = (e) => console.log(e.target.files);

// Always clean up your mess! 🗑️
document.body.removeChild(inputElement);

How the sausage is made

You ask, we deliver. Let's dive into the sausage-making process of the file select dialog in JS.

Selecting multiple files and file types

Who needs one when you can have many? Let's allow multiple files selections. Also, why get random files when you can ask for only images.

// More the merrier, right?
inputElement.setAttribute('multiple', '');

// We only need the pictures of your cat 😺
inputElement.setAttribute('accept', 'image/*');

Reading the files

Reading is essential. It's time to put the FileReader API to work.

inputElement.onchange = async (e) => {
    const files = e.target.files;
    const reader = new FileReader();
    
    reader.onload = (readerEvent) => {
       // Data so beautiful you could cry
    };

    for (const file of files) {
       // Images to DataURL, Everything else to Text. We've got standards!
       file.type.startsWith('image/') ? reader.readAsDataURL(file) : reader.readAsText(file, 'UTF-8');
    }
};

UI, not Louisiana. 🐊

Why hide everything? Let's use a label and a span/button for better UX.

<label for="fileInput" class="custom-file-input">Pick your poison</label>
<input id="fileInput" type="file" style="display: none;"/>

You've got mail... or error

You should never leave users guessing. Here's how to display error or success messages.

reader.onload = (readerEvent) => {
    // Who's the boss now?
};

reader.onerror = () => {
    // Oops! You did it again! You played with the file, got lost in the code 🎵
    alert("Sorry, there was an error reading the file.");
};

Using file data

The final curtain of our coding drama: how to use the data.

reader.onload = readerEvent => {
    // Look Mom, I made this!
    document.body.style.backgroundImage = `url(${readerEvent.target.result})`;
};

Potential pitfalls

Let's help you dodge some bullets:

Cross-browser compatibility

Because living in a perfect world is boring. Test on all browsers.

Security concerns

Beware of nerds bearing gifts. Always be suspicious of file execution.

Performance considerations

Beware of large files or multiple file reads. Your CPU will thank you!

Accessibility

Code like everyone's watching. Don't forget about ARIA attributes and keyboard navigability.

explain-codes / Javascript / How to open a select file dialog via js?

Linked

Bootstrap 4 file input doesn't show the file name



How to make a simple image upload using Javascript/HTML



Html: How to limit file upload to be only images?



Html <input type='file'> File Selection Event



Using form input to access camera and immediately upload photos using web app



How to allow `` to accept only image files?



Html - Display image after selecting filename



How the sausage is made Potential pitfalls