One things you may encounter as a web developer is to write a code that uploads a file from the end-user's browser (the front-end) to the application server (back-end).
If you are using PHP as a back-end scripting language then this is straightforward.
However, the above method has one big disadvantage : depending on the php.ini settings the uploading file may be size constrained (see upload_max_filesize | post_max_size).
If you want to overcome the server constraints then one way of doing that is by splitting the file into multiple small chunks and uploading each separate chunk at a time. This is known as a JavaScript chunked upload. The method has also its disadvantages, it requires a newer browser like IE10, Firefox 13, Chrome 10 or Opera 12.
There are many different implementations for JavaScript chunked uploads available on Internet. However, I want to add my contribution on the top of that pile so here we go : github.com/eugenmihailescu/my-chunk-uploader.
It consists on a JavaScript encapsulated class (see chunk-uploader.js) and a PHP class (see MyChunkUploader.php).
The JavaScript class provides the necessary functions to launch/abort the upload while the PHP class manages the received chunked uploads and concatenates them into a single file. It looks like a simple task and in fact it is, but you should consider the fact that the chunks may not be received in their natural order but in their finishing order.
These classes provides support for various customizations:
- maximum chunk size (like 1MiB)
- sending interval between chunks (like 20ms)
- maximum parallel chunks (like 10 chunks at a time)
- events that are triggered on starting a new chunk upload, on chunk sent, on upload progress, on upload error or on abort.
- it also provides support for sending a security nonce that the server script may validate it later.
The project hosted at GitHub provides also a demo implementation (see index.html) and a back-end demo script (see upload.php). Please note that you can find the classes full documentation on the project's GitHub repository.
Below it's a short diagram of how these files are related:
Now, if you think that this article was interesting don't forget to rate it. It shows me that you care and thus I will continue write about these things.
Eugen Mihailescu
Latest posts by Eugen Mihailescu (see all)
- Dual monitor setup in Xfce - January 9, 2019
- Gentoo AMD Ryzen stabilizator - April 29, 2018
- Symfony Compile Error Failed opening required Proxies - January 22, 2018