Sometimes, we want to add a custom upload button with JavaScript.

In this article, we’ll look at how to add a custom upload button with JavaScript.

How to add a custom upload button with JavaScript?

To add a custom upload button with JavaScript, we can add a hidden file input and then call click on it to open it.

For instance, we write:

<input type='file' style='display: none'>
<button>
  open
</button>

to add a file input and a button.

Then we write:

const input = document.querySelector('input');
const button = document.querySelector('button');
button.onclick = () => {
  input.click()
}

to select the input and button with querySelector.

Then we set button.onclick to a function that calls input.click to open the file selection dialog.

Conclusion

To add a custom upload button with JavaScript, we can add a hidden file input and then call click on it to open it.