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

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