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.
