ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

HTML5 Photo Uploader

?
?
Hieu Van
Hieu Van

This document summarizes the steps to build a photo uploader using HTML5 that allows dragging and dropping multiple photos under 10MB each, generates thumbnails, extracts EXIF and GPS data, tracks upload progress, and handles processed photos returned from the server. It discusses using FileReader API, XHR2, and Web Storage to read files, upload asynchronously, and cache thumbnails. Collaboration between the server returning finished photos and client requesting updates is also proposed.

1 of 31
Building Photo Uploader with HTML5 by Hieupv2 @Lifetime Technologies Co.,ltd Duy Tan Geeks #2 Jan 15th 2014
@mrhieu @mrhieu hieupv2@gmail.com Hieu Pham PHP developer Front-end developer Ruby On Rails beginner Contact About Me
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.¡° ¡±
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, 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
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/
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) - 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);
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¡­¡­¡­¡­¡­¡­¡­¡­¡­ ¡­¡­¡­¡­¡­¡­...
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 - 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
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.
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 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
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
HTML5 Photo Uploader
So what ? It just works ! mrhieu.github.io /500pxupload
want more ?
¤¢¤ê¤¬¤È See this online: http://goo.gl/nQ0Fid

More Related Content

HTML5 Photo Uploader

  • 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.¡° ¡±
  • 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/
  • 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.
  • 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
  • 31. ¤¢¤ê¤¬¤È See this online: http://goo.gl/nQ0Fid