Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Resumable Upload with pure Javascript & HTML5

Resumable Upload with pure Javascript & HTML5

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

Avatar for Oursky Limited

Oursky Limited

October 24, 2011
Tweet

More Decks by Oursky Limited

Other Decks in Programming

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. Further Development • Multiple connections simultaneous upload • Better way

    to identify “same file” • Optimal chunk size to minimize overhead Monday, 24 October, 11