Reading local files with <input type=“file”>

Question

This question already has an answer here:

• Reading file contents on the client-side in javascript in various browsers 3 answers

I have seen some demos where mozilla guys dropped a photo into a dropbox and then edited it locally in the browser. But now i cannot find out the demo and i need to load images to my html, then edit them with canvas element, then upload them to server. I think there is a way of doing this but i cannot find any good explanation. Basically i need to take a picture on my clients computer and insert it into a canvas element without touching the server. Any help will be appreciated.

Answer 1

It's the new File API from the W3C (which Mozilla had a lot to do with). I've done a couple of File API examples in answers to other StackOverflow questions that may be useful:

• HTML5 File API read as text and binary
• Get Image dimensions using Javascript during file upload
• How to know the size of the image to be uploaded with javascript?

That second one, in particular, shows loading a local image file into an img element, which you could readily use with a canvas.

If you want the drag-and-drop aspect, you might also check out the HTML5 Drag and Drop stuff; related article: Google Turns to HTML5 for Gmail’s New Drag-and-Drop Attachments.