Resumable Upload with pure Javascript & HTML5

Using HTML5 File Object, Javascript and Nginx upload_module to implement resumable file upload

Transcript

1. Experiment with Resumable File Upload, a pure javascript solution Ben Cheng, Oursky Internal Presentation Monday, 24 October, 11
2. Idea • Use HTML5 File object to slice the file into chunks; • Upload chunks to a web server; • Web server combine the chunks together into a complete file. • Client adds custom HTTP Header: X-Content- Range for the position of current chunk • Server response with uploaded range. Monday, 24 October, 11
3. Client Side • Generate unique “sessionID” for each unique upload; • Slice files / blob with webkitSlice() / slice() • HTML5 Local storage for resumable files • sessionID, fileName, fileSize, fileLastModifiedDate, currentTime, estimatedLoad Monday, 24 October, 11
4. Client Side • When UploadFile is clicked: • Is there session data in localstorage? • Yes => send a 100 byte chunk to server, and update ChunkManager with the byte-range return from server • (A) ask Chunk Manager the byte range to send (simply an array of ranges sent) • chunk the data with webkitSlice() • post the data with XHR • xhr.onReadyStateChange: • if chunk complete => update localStorage and ChunkManager with new chunk positions, go back to (A) • else => show error. • When PauseFile is clicked: • Interrupt the current XHR Monday, 24 October, 11
5. Server Side • Create session directory at /tmp/[sessionID] • Save each chunks into the directory, and combine chunks when a chunk is complete. • Remove tmp file when 404, 400, .... is returned for proxy. • So if it is 200, the other side of the proxy need to remove the file. • Return 201 if file is in-complete, with range data like “0-100, 105-200” in Body • Return 200 if a file is completed. Monday, 24 October, 11
6. Implementation • Client side: plupload custom module • Server side: nginx_upload module Monday, 24 October, 11
7. Further Development • Multiple connections simultaneous upload • Better way to identify “same file” • Optimal chunk size to minimize overhead Monday, 24 October, 11