A better experience with file uploading through PHP

23 Sep

Posted by guru in September 23rd, 2007

As web technology evolves, a focus has always been on trying to make a web application act more like a desktop application. This involves the implementations of techniques like AJAX and DOM to make web pages act more swift and sound. In this article we’ll talk about ways to improve the file uploading experience with PHP.

Traditionally, while uploading files, you specify the file path in a ‘HTML file input’ field. The file is uploaded to the server when submitting the form.

There are two problems with this method:

Submitting the form refreshes the page, or loads another page.
While uploading BIG files there is no indicator to show the data transfer progress.

There aren’t many remedies to solve this problem.
Here is the list of things that we can’t do:

Uploading files with AJAX.
This is because JavaScript has no access to local files.
Report the progress while a file is being uploaded. This is a problem, that only exists with PHP.

Clearing out doubts:

Can I submit a HTML form using AJAX with POST method?
Yes, it is possible. What’s not possible is to submit a file using AJAX.

Alternative ways:
An alternative to AJAX to prevent page reloading is to use inline frames. An inline frame can load one HTML files within another. So if you put your form inside an inline frame, submitting the form won’t reload the whole page.

What about a progress bar or an indicator for uploading progress?
To tell you the truth, it is impossible. It can’t be done using PHP alone.

PHP uses a function, ‘move_uploaded_file’ to move the already uploaded files to destination directory on the server. The files are initially uploaded to a temporary directory and there is no way to access that file while the uploading is in progress.

Any alternative to that?

You can use a BIT of help from other PHP like languages like Perl or Java, just for uploading process. But, for that, you need to have them installed at the first place of course.
You can also modify PHP itself, to provide a way to access the properties of the temporary file it uses while the uploading is in progress. But its almost impossible on shared hosting environment.
You can use client sided component like Java applet or a flash object to upload the files in a much more controlled way. But I think you are better off without it, for small files.

Can I get CODE for the iframe technique?
Not now, you can either search for it on google, or comment on this post to have me write a code for that.

7 comments so far.

Follow-up this post comment rss or leave a trackback

Richard wrote,

Hey guru,

I think we can have coilation to make a site its download site, like filehippo.com and i need it better than that site. If you’d like to help me, plz contact me on the mail I provided above

miniDigg wrote,

thanks for idea man!

Matt Foster wrote,

Instead of having your form with the file input inside the iframe. You can have the form in the top level document but has the target attribute aligned with an iframe in the document, such that when it is submitted it submits on to the iframe. This decoupling allows you to slide the iframe from view.

guru wrote,

Matt’s idea is a good one, thanks for commenting

mkavici wrote,

here is a great example of flash and javascript upload with progress which I commonly use http://swfupload.mammon.se/

cemaleker wrote,

We did a progress bar for our uploads in a project. You can use a CLI runing behind for web uploads. Thats the easiest way. And you can follow the proccess with an AJAX call.

For web form uploads you can use uploadprogress_get_info() function if you have PECL packages installed.

nothingrows wrote,

There is two reason at showing progress bar via php. First, you need to know client’s uploading speed, second is web server’s downloading speed. When you can calculate these variables, you may display a progress bar via javascript.