Uploading large files from browser to ASP.Net web server - WebSockets

Problem

Most of the applications are now web applications. When we are in browser we are in restricted area. We cannot code freely to leverage machine's full capabilities. One of the area where the limitation applies is on uploading large files which is a normal use case. Small files we can easily upload using file input control. But when the file size grows we get into trouble. 

There are so many solutions out there including third party controls. But what if we need to write one from scratch? What are the options?

Alternatives

We can use ActiveX controls which helps to unleash the potential of the machine. With the arrival of HTML5 FileAPI we have more control in the HTML itself. There are so many third parties who are making use of the same. If there is a way to use ActiveX or third party controls, the problem is solved. Else or you think the existing solutions are not enough, continue reading.

Solutions

There are many ways to upload files. Below are the principles taken on the solution approach

Principles

• Never use ActiveX
• Read the file without breaking the browser memory (chunking)
• Should support up to 25GB file minimum.
• Support scaling

There are reasons behind the principles but are not relevant at this point. Below is the first solution and that is going to be discussed in this post.

WebSockets

One of the modern way is the WebSockets. Below goes a repo which demos how the file can be read async and sync methods and send via WebSockets.

https://github.com/joymon/large-file-upload-from-browser

Feels free to surf the repo and comment. Will be adding more development notes soon.

Results

• Using a Web Worker and FileReaderSync API seems faster than async FileReader API.

Limitations

Below goes some limits

1. The connection has to be open. Affects scaling.
2. Socket connection management is tedious
3. The server is slower in reading and writing the files. Client reports it send all the data.

References

https://www.accelebrate.com/blog/file-uploads-web-sockets-part-3-of-3/
http://blogs.perl.org/users/joel_berger/2013/02/a-new-protocol-for-sending-files-over-websockets.html
https://github.com/ChadMcCallum/PrDCur

WebSockets - General

https://www.codeguru.com/csharp/csharp/programming-html5-web-sockets-in-asp.net-4.5.htm
https://stackoverflow.com/questions/11080112/large-file-upload-with-websocket#comment14518534_11081396
http://blogs.microsoft.co.il/idof/2012/03/01/whats-new-in-wcf-45-websocket-support-part-1-of-2/
https://blogs.msdn.microsoft.com/youssefm/2012/07/17/building-real-time-web-apps-with-asp-net-webapi-and-websockets/