HTML5: take a photo and upload it from mobile phone browser

UPDATED on 2015-01-26 with Image Resize

Yesterday, a colleague asked me:

“Andy, I need to make a simple mobile application that takes a picture and sends it to my webserver. It’s too difficult?”

Obviously no, with a little bit of HTML5. ;-)


Let’s start making an HTML page with a simple form that permits the user to select or take a photo using the phone camera:

We use the attribute


to say to mobile browser to set the INPUT tag to accept images from camera roll or camera app, and some javascript to display a simple upload progress.

Server side, the PHP script is dramatically simple:

That’s all!

The complete source is available on my GIT repository.

Published: January 21 2015