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

Question

I stumbled upon this answer , which is brilliant:

In iPhone iOS6 and Android ICS onwards, HTML5 has the following which allows you to take pictures from your device:

<input type="file" accept="image/*" capture="camera"> 

Capture can take on values ​​such as camera, camcorder, and audio.

Is it possible to take another step using ajax to immediately upload a photo after taking it?

For example, using my phone, as soon as I click on the input, it opens a camera that will immediately allow me to take a picture and save it. When I save it to the camera, it is then displayed with the enter button as a file to upload.

What is needed to download this photo immediately, and not for the user to click the "Submit" form?

Answer 1

This is really easy to do, just send the file using the XHR request inside the input file to the exchange handler.

 <input id="myFileInput" type="file" accept="image/*;capture=camera"> var myInput = document.getElementById('myFileInput'); function sendPic() { var file = myInput.files[0]; // Send file here either by adding it to a `FormData` object // and sending that via XHR, or by simply passing the file into // the `send` method of an XHR instance. } myInput.addEventListener('change', sendPic, false);