Uploading chunks of a large file using XHR2

I was having a conversation with my college friend about the enhancements in XHR2 and I was showing him how one can upload a file to the server using plain Ajax. He asked me whether I can upload a large file to the server such as a video file. I tried doing that but was bumped when the server reported with 400 error telling me that the 'POST size has exceeded maximum limit'. This got me thinking whether I can upload chunks of a large file to the server. I referred to the FileSystem API and came across the slice method that allows you to get a fragment of a file.

The slice method takes two parameters which specifies the start and end byte position of the fragment that is to be extracted. This fragment can then be uploaded to the server using XHR2.

Here’s the client code:

Here I’ve specified the chunk size as 1 MB (1024*1024) and then slicing the file such that each fragment is of 1 MB in size. Each of this fragments is then pushed to an array and then uploaded to the server using XHR2. Each fragment is a ByteArray and is sent to server synchronously.

Here’s the server side code:


The ByteArray is then written\appended to the file by calling the write method on the FileOutputStream object.

Output:

           Uploading chunk of size 1048576.

           Chunk of size 1048576 uploaded successfully.

           Uploading chunk of size 1048576.

           Chunk of size 1048576 uploaded successfully.

           Uploading chunk of size 1048576.

           Chunk of size 1048576 uploaded successfully.

           Uploading chunk of size 17540.

           Chunk of size 17540 uploaded successfully.

Here you can see that each fragment is of size 1 MB and the last fragment is of 17 KB. I've tried uploading large images and videos of size greater than 50 MB and it works fine.