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

“accept=”image/*”

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.