html5 photo uploader

Building Photo Uploaderwith HTML5

by Hieupv2@Lifetime Technologies Co.,ltd

Duy Tan Geeks #2 Jan 15th 2014

@mrhieu @mrhieu

hieupv2@gmail.com

Hieu PhamPHP developerFront-end developerRuby On Rails beginner

Contact

About Me

About Lifetime Technologies Co.,ltdEstablished in June 15th 2005100% foreign-owned

Contact9F, Viet A building, Cau Giay district, Hanoi, Vietnamwww.lifetimetech.vn

LIFETIME means

Employees won't leave the company and don't need to. They devote their lifetime to the company's development.“

”

Our customers

START

Ancient photo uploader

and “MODERN” one

Challenges

● Drag ‘n’ drop

● Limit of 10 files, 10MB each

● Multiple upload

● Instant photo thumbnail, file info

● Extract EXIF data at CLIENT-side

● Extract GPS data and display (on a map)

Challenges (cont)

● Form data for each photo

● Add, remove photos to upload

● Display upload progress

Drag and drop

- Javascript API- Event-based- Listening for Dragging Events: dragstart, dragenter, drop, dragenddomElement.addEventListener('dragdrop', handleDropStart, false);function handleDrop(e) { var files = e.dataTransfer.files;

Reference:www.html5rocks.com/en/tutorials/dnd/basics/Demo: http://html5demos.com/dnd-upload

Limit of 10 files, 10MB each

- Count- File reader APIvar files = e.dataTransfer.files; // FileList object. // files is a FileList of File objects. List some properties. for (var i = 0, f; f = files[i]; i++) { console.log(f.name, f.type, f.size, f.lastModifiedDate)}

Reference:www.html5rocks.com/en/tutorials/file/dndfiles/

Multiple Upload

Implementation of XHR2 object- Append form data “on the fly”- Cross-origin requests sharing (CORS)- Uploading progress events- Chunk uploading/downloading binary data

Reference:www.html5rocks.com/en/tutorials/file/xhr2/#toc-send-formdata

Instant thumbnail, file info

- File reader API (again)- Asynchronousvar reader = new FileReader();// Closure to capture the file information.reader.onload = (function(theFile) { return function(e) { // Render thumbnail. console.log(e.target.result);

}})(file);reader.readAsDataURL(f);

Instant thumbnail, file info (cont)

e.target.resultdata:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAL4BHQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRol………………………………………...

Extract EXIF data

- File reader API (agaiiin)- At the first 128kb of the image- Standardized data structure

@.@

Reference: http://code.flickr.net/2012/06/01/parsing-exif-client-side-using-javascript-2/

Extract EXIF data (cont)

Extract GPS data and display (on a map)

- Extract from Exif Data- Properties: .GPSLatitude

.GPSLongitude- Googlemaps Javascript API v3

Add, remove specifics photo

- Tricky- Add- Remove

Upload progress

- XHR2xhr.upload.onprogress = function(e) { if (e.lengthComputable) { progressBar.value = (e.loaded / e.total) * 100; progressBar.textContent = progressBar.value; // Fallback for unsupported browsers. } }

Reference:www.html5rocks.com/en/tutorials/file/xhr2/#toc-send-blob

Put them all together

JqueryJquery File Upload github.com/blueimp/jQuery-File-Upload

Canvasresize, Exif github.com/gokercebeci/canvasResize

Javascript Template Enginegithub.com/blueimp/JavaScript-Templates

BootstrapDatepicker, TimepickerOthers.

http://mrhieu.github.io/500pxupload/

Demo

Wait a minute...

One more thing

Display INCOMPLETED

uploaded photos

Upload Processing...

One more thing

● It takes (long) time for server’s manipulation- Re-sizing- Indexing- Generating location (place) info...● No extra thumbnail photo stored on server

side● Automatically fetch “real” photo once

processes have been finished.

HTML5 Web storage

- 5MB- Key-value- Session Storage / Local Storageif (window.sessionStorage) { //.. sessionStorage.setItem('photo_' + data.files[0].name.substring(0, 20), imageData); }sessionStorage.getItem(<key>);

Reference: http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-send-blob

Clever Collaboration

Server- API: whether photos are all finished- (Push technology)

Client- Continuous request (per 5s) / Push technology- Retrieve processed photos- Remove web storage records

So what ?

It just works !

mrhieu.github.io/500pxupload

want more

?

ありがと

See this online: http://goo.gl/nQ0Fid