This document describes building a photo uploader web application using HTML5. It outlines challenges like drag and drop uploading, limiting file size and number, generating thumbnails, and extracting metadata. It discusses using APIs like FileReader, XHR2, and web storage to implement features like multiple concurrent uploads, progress monitoring, and caching uploaded files before processing is complete on the server. The goal is to create a seamless photo uploading experience that displays previews and information instantly while processing occurs asynchronously in the background.

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

28. So what ?
It just works !
mrhieu.github.io
/500pxupload

29. want more
?

30. ありがと
See this online: http://goo.gl/nQ0Fid