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

Question

I came across this answer which is brilliant:

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

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

Capture can take values like camera, camcorder and audio.

Is it possible to take this one step further by using ajax of some kind to immediately upload photo after its taken?

For example, using my phone, once I tap on the input, it then opens the camera which will immediately allow me to take a photo and save it. When I save it to camera, it's then listed by the input button as the file to upload.

What would it take for this photo to be immediately uploaded instead of waiting for the user to click the Submit button of the form?

Solution

It's really easy to do this, simply send the file via an XHR request inside of the file input's onchange 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);

Comments

[micah]

Thank you for this answer. So this event listener is watching the input#myFileInput for a change, knowing when a photo is queued for being uploaded? And then I suppose it'll execute the sendPic function with the FormData objct automatically uploading the photo? I understand what XHR is at a very high level. Did I get that right?

[Ray Nicholus]

The event listener is invoked after the user selects a file.

[micah]

So the event listener prompts the sendPic() to immediately upload the file after the camera takes the photo?

[Ray Nicholus]

Assuming you add the appropriate code, as described in my comments, yes.

[micah]

Thank you, this is great. I need to test it but this is the answer and explanation I was looking for!

[Dibish]

Tried this code in android jelly bean, its only opens gallery. How can i open device camera function? In ios its working fine

[iluvpinkerton]

Can you point me in the right direction to find out how to send a form via XHR?

[Ray Nicholus]

@iluvpinkerton Sure, use (or take a look at) Fine Uploader or ajax-form. Disclaimer - I'm the developer of both libraries.

[sabithpocker]

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