102

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?

Community
  • 1
  • 1
micah
  • 1,937
  • 6
  • 27
  • 40
  • 1
    What have you already tried? What has you stumped? – Marcin Jun 21 '13 at 18:10
  • If you are interested in 3rd party controls, you can consider Kendo UI http://demos.kendoui.com/web/upload/api.html – HaBo Jun 21 '13 at 18:18
  • 1
    @Marcin I've never been strong with javascript so I wasn't sure what to even try. What I'm trying to replicate is native app feature where photo immediately gets uploaded to service or remote server without extra step after taking photo with camera. – micah Jun 21 '13 at 20:34

1 Answers1

123

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);
Ray Nicholus
  • 19,538
  • 14
  • 59
  • 82
  • 1
    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? – micah Jun 21 '13 at 20:48
  • The event listener is invoked after the user selects a file. – Ray Nicholus Jun 21 '13 at 20:50
  • So the event listener prompts the `sendPic()` to immediately upload the file after the camera takes the photo? – micah Jun 21 '13 at 21:03
  • Assuming you add the appropriate code, as described in my comments, yes. – Ray Nicholus Jun 21 '13 at 21:24
  • Thank you, this is great. I need to test it but this is the answer and explanation I was looking for! – micah Jun 21 '13 at 22:46
  • Tried this code in android jelly bean, its only opens gallery. How can i open device camera function? In ios its working fine – Dibish Dec 09 '13 at 10:48
  • 1
    Can you point me in the right direction to find out how to send a form via XHR? – iluvpinkerton Apr 23 '15 at 00:00
  • 4
    @iluvpinkerton Sure, use (or take a look at) [Fine Uploader](http://fineuploader.com) or [ajax-form](https://github.com/rnicholus/ajax-form). Disclaimer - I'm the developer of both libraries. – Ray Nicholus May 09 '15 at 02:53
  • `` – sabithpocker Jan 08 '18 at 13:08