BigUpload: Uploading really big files in the browser

Download BigUpload from GitHub

I’ve been working on a web application which requires that the user be able to upload files through their browser. Because of the context of the application, some of these files will be pretty large.

Previously, the only way to handle file uploads larger than a few megabytes was to use flash or some other ugly plugin.

But with the HTML5 FileReader class, we can do it right in the browser.

BigUpload Screenshot

To do this, I’ve made BigUpload, which consists of a Javascript class and accompanying PHP script. It also includes an example HTML page demonstrating the uploader.

BigUpload uses FileReader to split large files into manageable chunks, and then sends these chunks to the server one at a time using AJAX.

The PHP script then pieces these chunks together into one large file, and when the file is done uploading, moves and renames the finished file.

Because the chunks are all the same size, the script can calculate an accurate progress bar and report the time remaining with some accuracy. It can also easily pause, resume, or cancel in-progress uploads.

This tool is capable of handling file uploads of up to 2GB in size, without the need to tweak the max_upload and timeout variables for your server and without eating up all of your server’s memory trying to upload a 2GB file in one go.

It’s only supported on Chrome and Firefox, but falls back to a normal file upload form on other browsers.

Download BigUpload from GitHub

 

3 Responses to “BigUpload: Uploading really big files in the browser”

  1. Pepe says:

    Hi, I am using BigUpload and it is a great tool. I have been modifying a little to upload the files to a different folder than the default one. The only thing i find to enhance is the timer. I think it is not too much accurate.

    • Pepe says:

      Ok, in the line that prints the remaining time –I don’t know what line number is because I have made some changes–, i have to divide the “timeLeft” variable by 10 to get the most accurate remaining time.

      Also, setting (progress % 1 == 0) in the if condition, updates the time more frequently.

  2. [...] Uploading huge files easily with the HTML5 FileReader class (by dividing them into chunks).  [...]

Leave a Reply

Current day month ye@r *