Date post: | 11-Jun-2015 |
Category: |
Software |
Upload: | duy-tan-geek |
View: | 213 times |
Download: | 2 times |
Building Photo Uploaderwith HTML5
by Hieupv2@Lifetime Technologies Co.,ltd
Duy Tan Geeks #2 Jan 15th 2014
@mrhieu @mrhieu
PHP developerFront-end developerRuby On Rails beginner
Contact
About Me
About Lifetime Technologies Co.,ltd100% foreign-ownedIT industry61 membersWhat we do:
Web applicationMobile application
Contact9F, Viet A building, Cau Giay district, Hanoi, Vietnamwww.lifetimetech.vn
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 EXIF data at CLIENT-side
● Extract GPS data and display (on a map)
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, dragenddomElement.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
Limit of 10 files, 10MB each
- Count- File reader APIvar 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/
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
Instant thumbnail, file info
- File reader API (again)- Asynchronousvar 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);
Instant thumbnail, file info (cont)
imageData:data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAL4BHQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRol………………………..
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/
Extract EXIF data (cont)
Extract GPS data and display (on a map)
- Extract from Exif Data- Properties: .GPSLatitude
.GPSLongitude- Googlemaps Javascript API v3
Add, remove specifics photo
- Tricky- Add- Remove
Upload progress
- XHR2xhr.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
Put them all together
JqueryJquery File Upload github.com/blueimp/jQuery-File-Upload
Canvasresize, Exif github.com/gokercebeci/canvasResize
Javascript Template Enginegithub.com/blueimp/JavaScript-Templates
BootstrapDatepicker, TimepickerOthers.
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...● No extra thumbnail photo stored on server
side● Automatically fetch “real” photo once
processes have been finished.
HTML5 Web storage
- 5MB- Key-value- Session Storage / Local Storageif (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
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
So what ?
It just works !
mrhieu.github.io/500pxupload
want more
?