How to open a file dialog when clicking on a button?

Web Development
,
1

I need to create a button that allows users to upload files. When the user clicks on the button, I want it to open the file select dialog box so that they can choose a file from their computer.

<!DOCTYPE html>
<html>
<head>
    <title>File Upload</title>
</head>
<body>
    <button id="upload-button">Upload File</button>
    <input type="file" id="fileInput" style="display: none;">
</body>
</html>

I have the above HTML code for the button and input field but do I make it work?
I would appreciate any guidance or code examples.

2

You can use the code below.

<button id="upload-button" onclick="document.getElementById('fileInput').click();">Upload File</button>
<input type="file" id="fileInput" style="display: none;" />

When this button is clicked, the “onclick” attribute triggers a JavaScript function that finds the hidden file input element by its ID “fileInput” and simulates a click on it using the click() method. This action opens the file select dialog box, allowing users to choose files from their computer.

3

Here is a non-JavaScript version. This will also do the trick.

<button id="upload-button">
    <label for="fileInput">Upload File</label>
</button>
<input type="file" id="fileInput" style="display: none;">

The label element is associated with input using the “for” attribute. When the button is clicked, it indirectly triggers the file input element by clicking on its associated label, which opens the file select dialog.