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
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);
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/
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.
28. So what ?
It just works !
mrhieu.github.io
/500pxupload
