File upload to remote server with progress bar

Question

Hi all. I need to incorporate file uploads into my website, and after a few hours of thinking I came up with a pretty good way I think.

The page with the upload form will be served by a front end web server. To make sure it uploads the file to my remote storage server I'll do this in the markup:

<form action="http://storage.mysite.com/upload.php"&gt;
    <!-- whatever -->
</form>

So that's that handled, but that makes things like a tad more complicated. I also wanted a progress bar for the upload, and I think I came up with a way to do that too. Check out my awesome Photoshop skills explaining it:

http://imgur.com/opk39.jpg

To get the progress of the uploaded file, I was going to use the PHP function filesize(); to get the filesize of the file as it's being uploaded. If I have that and the total filezsize I can work it out using Javascript and update the page. But I don't know how to get the total filesize of the upload either :P

Then when the upload is finished I can check the filesize again and if it's the same as the total filesize I know the upload is finished. Then I can run a Javascript function to update the page with the download URL and everything else.

Anyway that's how I'm planning to do it. I don't want to use any fancy flash stuff as I don't want to rely on my users having flash installed. Does anyone who has done something simular or have experience in doing this lend some advice and let me know if I'm going about it the right way?

Thanks, much appreciated.

Answer 1

I'm a little rusty on my php skills but I'll try and point you in the right direction. Since XMLHttpRequest doesn't support file uploads you need to work around that using one of two methods.

The first method is to patch the PHP RFC1867 handler, which can be found here from Pdoru. The problem with this method is if your using a shared server people can get a little touchy about you applying patches, it also requires you to depend on an old bit of C code to do your heavy lifting (not something that I would want to debug!).

The second method is to use a hidden iframe and an external script to poll the progress (write the total size of the whole file and actual uploaded file to temporary files and compare).

I think option 2 is probably the best for your situation, an awesome example was put out a while ago by Thomas Larsson which you can find here.

Tom's post goes over both methods and is highly recommended reading. There is an example for how to do it using a Perl script using a php page which I think will either meet your needs or at least explain your options.

As far as I know the methods described above are presently the only 2 ways this can be done.

Hopefully that gets you on the right path.

Good luck!

Answer 2

There are loads of jQuery plugins that will do this for you so you don't need to reinvent the wheel.

Here is one example

There are many out there, just try searching jQuery plugins site for "file upload progress"

or

Search Google