Question

118

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

rated 0 times [ 124] [ 6] / answers: 1 / hits: 144556 / 11 Years ago, fri, june 21, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

parker

Add To Favorites

Follow

Total Points: 259

Total Questions: 109

Total Answers: 97

Location: Zambia

Member since Thu, Jun 25, 2020

4 Years ago

parker questions

1 How to catch network errors with Axios request interceptor?

Fri, Feb 18, 22, 00:00, 2 Years ago

1 Problem in redirecting programmatically to a route in react router v6

Tue, Nov 9, 21, 00:00, 3 Years ago

1 How to wait for Cypress then() command to finish before returning a value?

Fri, Sep 10, 21, 00:00, 3 Years ago

1 Discord JS, discord-buttons; How to attach more than 5 buttons to a message?

Fri, Aug 13, 21, 00:00, 3 Years ago

1 Google GeolocationAPI Requested entity was not found

Tue, Aug 25, 20, 00:00, 4 Years ago

View All

answered 11 Years ago caylasarinag · Accepted Answer

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);