Building Photo Uploader
with HTML5
by Hieupv2
@Lifetime Technologies Co.,ltd
Duy Tan Geeks #2 Jan 15th 2014
@mrhieu @mrhieu
hieupv2@gmail.com
PHP developer
Front-end developer
Ruby On Rails beginner
Contact
About Me
About Lifetime Technologies Co.,ltd
100% foreign-owned
IT industry
61 members
What we do:
Web application
Mobile applicati...
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...
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
domEleme...
Limit of 10 files, 10MB each
- Count
- File reader API
var files = e.dataTransfer.files; // FileList object.
// files is a...
Multiple Upload
Implementation of XHR2 object
- Append form data “on the fly”
- Cross-origin requests sharing (CORS)
- Upl...
Instant thumbnail, file info
- File reader API (again)
- Asynchronous
var reader = new FileReader();
// Closure to capture...
Instant thumbnail, file info (cont)
imageData:
data:image/jpeg;base64,
/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMC
AgMCAgMDAwMEAw...
Extract EXIF data
- File reader API (agaiiin)
- At the first 128kb of the image
- Standardized data structure
@.@
Referenc...
Extract EXIF data (cont)
Extract GPS data and display (on a
map)
- Extract from Exif Data
- Properties: .GPSLatitude
.GPSLongitude
- Googlemaps Jav...
Add, remove specifics photo
- Tricky
- Add
- Remove
Upload progress
- XHR2
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
progressBar.value = (e.loaded / e.t...
Put them all together
Jquery
Jquery File Upload github.com/blueimp/jQuery-File-Upload
Canvasresize, Exif github.com/gokerc...
http://mrhieu.github.io/500pxupload/
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....
HTML5 Web storage
- 5MB
- Key-value
- Session Storage / Local Storage
if (window.sessionStorage) {
//..
sessionStorage.set...
Clever Collaboration
Server
- API: whether photos are all finished
- (Push technology)
Client
- Continuous request (per 5s...
So what ?
It just works !
mrhieu.github.io
/500pxupload
want more
?
ありがと
See this online: http://goo.gl/nQ0Fid
Modern photo uploader
Upcoming SlideShare
Loading in …5
×

Modern photo uploader

278
-1

Published on

Published in: Software, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
278
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Modern photo uploader

  1. 1. Building Photo Uploader with HTML5 by Hieupv2 @Lifetime Technologies Co.,ltd Duy Tan Geeks #2 Jan 15th 2014
  2. 2. @mrhieu @mrhieu hieupv2@gmail.com PHP developer Front-end developer Ruby On Rails beginner Contact About Me
  3. 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. 4. START
  5. 5. Ancient photo uploader
  6. 6. and “MODERN” one
  7. 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. 8. Challenges (cont) ● Form data for each photo ● Add, remove photos to upload ● Display upload progress
  9. 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. 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. 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. 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. 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. 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. 15. Extract EXIF data (cont)
  16. 16. Extract GPS data and display (on a map) - Extract from Exif Data - Properties: .GPSLatitude .GPSLongitude - Googlemaps Javascript API v3
  17. 17. Add, remove specifics photo - Tricky - Add - Remove
  18. 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. 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. 20. http://mrhieu.github.io/500pxupload/
  21. 21. Wait a minute...
  22. 22. One more thing Display INCOMPLETED uploaded photos
  23. 23. Upload Processing...
  24. 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. 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. 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. 27. So what ? It just works ! mrhieu.github.io /500pxupload
  28. 28. want more ?
  29. 29. ありがと See this online: http://goo.gl/nQ0Fid

×