Sometimes, we want to use form input to access camera and immediately upload photos using web app with JavaScript.
In this article, we’ll look at how to use form input to access camera and immediately upload photos using web app with JavaScript.
How to use form input to access camera and immediately upload photos using web app with JavaScript?
To use form input to access camera and immediately upload photos using web app with JavaScript, we can set the accept attribute of the file input to image/*;capture=camera.
For instance, we write
<input id="myFileInput" type="file" accept="image/*;capture=camera" />
to add a file input that accepts photos captured from a camera.
Then we write
const myInput = document.getElementById("myFileInput");
const sendPic = () => {
const file = myInput.files[0];
//...
};
myInput.addEventListener("change", sendPic, false);
to select the file input with getElementById.
Then we call addEventListener to listen to the change event triggered by the file input.
We call sendPic to get the image from myInput.files[0].
And then we can do what we want with it.
Conclusion
To use form input to access camera and immediately upload photos using web app with JavaScript, we can set the accept attribute of the file input to image/*;capture=camera.
