Modern photo uploader

  • 126 views
Uploaded on

 

More in: Software , Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
126
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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 PHP developer Front-end developer Ruby On Rails beginner Contact About Me
  • 3. About Lifetime Technologies Co.,ltd 100% foreign-owned IT industry 61 members What we do: Web application Mobile application Contact 9F, Viet A building, Cau Giay district, Hanoi, Vietnam www.lifetimetech.vn
  • 4. START
  • 5. Ancient photo uploader
  • 6. and “MODERN” one
  • 7. 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)
  • 8. Challenges (cont) ● Form data for each photo ● Add, remove photos to upload ● Display upload progress
  • 9. 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
  • 10. 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/
  • 11. 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
  • 12. 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);
  • 13. Instant thumbnail, file info (cont) imageData: data:image/jpeg;base64, /9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMC AgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYID AoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRU VDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFB QkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFB QUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFB QUFBQUFBT/wAARCAL4BHQDASIAAhEBAxEB/8 QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQ FBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9 AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0Kxw RVS0fAkM2JyggkKFhcYGRol………………………..
  • 14. 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/
  • 15. Extract EXIF data (cont)
  • 16. Extract GPS data and display (on a map) - Extract from Exif Data - Properties: .GPSLatitude .GPSLongitude - Googlemaps Javascript API v3
  • 17. Add, remove specifics photo - Tricky - Add - Remove
  • 18. 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
  • 19. 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.
  • 20. http://mrhieu.github.io/500pxupload/
  • 21. Wait a minute...
  • 22. One more thing Display INCOMPLETED uploaded photos
  • 23. Upload Processing...
  • 24. 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.
  • 25. 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
  • 26. 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
  • 27. So what ? It just works ! mrhieu.github.io /500pxupload
  • 28. want more ?
  • 29. ありがと See this online: http://goo.gl/nQ0Fid