HTML5 Photo Uploader

Building a photo uploader on HTML5. Insprired by 500px.com

Transcript

1. Building Photo Uploader with HTML5 by Hieupv2 @Lifetime Technologies Co.,ltd Duy Tan Geeks #2 Jan 15th 2014
2. @mrhieu @mrhieu hieupv2@gmail.com Hieu Pham PHP developer Front-end developer Ruby On Rails beginner Contact About Me
3. About Lifetime Technologies Co.,ltd Established in June 15th 2005 100% foreign-owned Contact 9F, Viet A building, Cau Giay district, Hanoi, Vietnam www.lifetimetech.vn LIFETIME means Employees won't leave the company and don't need to. They devote their lifetime to the company's development. “ ”
4. Our customers
5. START
6. Ancient photo uploader
7. and “MODERN” one
8. 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)
9. Challenges (cont) • Form data for each photo • Add, remove photos to upload • Display upload progress
10. Drag and drop - Javascript API - Event-based - Listening for Dragging Events: dragstart, dragenter, drop, dragend domElement.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
11. Limit of 10 files, 10MB each - Count - File reader API var 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/
12. 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
13. Instant thumbnail, file info - File reader API (again) - Asynchronous var 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);
14. Instant thumbnail, file info (cont) e.target.result data:image/jpeg;base64, /9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMC AgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYID AoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRU VDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFB QkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFB QUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFB QUFBQUFBT/wAARCAL4BHQDASIAAhEBAxEB/8 QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQ FBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9 AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0Kxw RVS0fAkM2JyggkKFhcYGRol……………………… ………………...
15. 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/
16. Extract EXIF data (cont)
17. Extract GPS data and display (on a map) - Extract from Exif Data - Properties: .GPSLatitude .GPSLongitude - Googlemaps Javascript API v3
18. Add, remove specifics photo - Tricky - Add - Remove
19. Upload progress - XHR2 xhr.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
20. Put them all together Jquery Jquery File Upload github.com/blueimp/jQuery-File-Upload Canvasresize, Exif github.com/gokercebeci/canvasResize Javascript Template Engine github.com/blueimp/JavaScript-Templates Bootstrap Datepicker, Timepicker Others.
21. http://mrhieu.github.io/500pxupload/ Demo
22. Wait a minute...
23. One more thing Display INCOMPLETED uploaded photos
24. Upload Processing...
25. 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.
26. HTML5 Web storage - 5MB - Key-value - Session Storage / Local Storage if (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
27. 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
29. So what ? It just works ! mrhieu.github.io /500pxupload
30. want more ?
31. ありがと See this online: http://goo.gl/nQ0Fid