Image upload with progress bar or please wait screen.

[AaronL]

Hello,

I wrote a program that uploads images to a website using PHP but I'm not liking
how it's currently working.

When the user hits submit, the browser takes a long time, which I know is normal
because it's uploading images, however, I need to write a way to make it show
a progress bar, or at least say "uploading images please wait..."

I was thinking I would make imageuploader.php and then pass a $_GET value
with the progress with all of the files posted hidden, after the user chooses
which files to upload. I figured I'd have it upload one file at a time, and use the
header() function to move it to the next step and upload the 2nd file, but I realized
that wouldn't work because header would give me that "header already created"
type error.

The software I'm writing (hopefully) will be very professional and popular, but I
don't want my image uploader to be crap.

Any advice out there??

[code green]

I have noticed a few people looking for a 'real' time progress bar but it seems to be difficult.
You can perform a simple cheat and use a moving-gif in the HTML to make the user feel comfortable.
Or there are a few Javascript classes that simulate a progress bar.
xp_progress.js is one I use.

[Atli]

This is one of those major failures all the browser manufacturers share in. The displaying of the progress of a file upload should of course be the responsibility of the browser itself. We should not need to resort to some JavaScript hacks or static (read: fake) animated images to make it "appear" as if there is actually some progress display going on.

But hey, it's not like we're not used to covering for the shortcomings of the browsers... (Some more than others.)

On a more practical note, to actually display the status of a file upload, you would need a HTTP server module that is capable of relaying the status back to the browser as the data comes in. And of course the client-side code to receive and display the data. -- Not exactly something you just slap together for the sake of it.

A better approach is to just display a "loading" image, with a "Please wait..." header, that lets the user know something is happening, even though the progress of what is going on is nowhere to be seen.

[AaronL]

Ok, well what I'd like to do is bring up the upload screen where you browse for files, and when
you click on the upload button, it brings it up to another screen that says please wait, then after they're done uploading, I want it to return to another page.

How can I do that because if I submit to the next page from the browse for files page, and then bring up the please wait page, if I use the header() command to redirect after the upload, it will give me the header already created message or something.

I'm most likely thinking of the wrong methods to do this.

[chathura86]

go through this manual, i managed to create a real time upload progress bar with this module (with the help of ajax).

http://php.net/manual/en/book.apc.php

but the downside is most hosting servers does not support this extension yet
and i did not found a windows version of the module.
so make sure of that. other than that it works perfectly

Regards

[Atli]

@chelf
That's not something you can do with PHP alone. The PHP code is only executed after the request has been completely received (including the files). What you need to do is have JavaScript display the "Please wait" message when you click on the upload button, before the form is submitted.

The simples way to do that is to attach a function to the form's submit event that changes the contents of the page and the returns true.

<form action="process.php" onsubmit="showLoading()">

And then have the showLoading function create the elements for the "Please wait" message. (I copied this from an old project of mine.)

function showLoading() {
    // Create a white box to cover the page.
    var back = document.createElement('div');
    back.style.backgroundColor = '#ffffff';
    back.style.position = 'fixed';
    back.style.zIndex = '0';
    back.style.left = '0px';
    back.style.top = '0px';
    back.style.right = '0px';
    back.style.bottom = '0px';
    document.body.appendChild(back);
 
    // Add a box to contain the message.
    var box = document.createElement('div');
    box.style.position = 'absolute';
    box.style.zIndex = '1';
    box.style.width = '250px';
    box.style.margin = '15px ' + ((document.body.offsetWidth / 2) - (250 / 2)) + 'px';
    box.style.fontFamily = 'Verdana, Arial, serif';
    document.body.appendChild(box);
 
    // Add the "Please wait" header
    var message = document.createElement('span');
    message.id = 'loading_header';
    message.style.display = 'block';
    message.style.fontSize = '175%';
    message.style.fontWeight = 'bold';
    message.style.textAlign = 'center';
    message.innerHTML = 'Please wait';
    box.appendChild(message);
 
    // Add the subheader message
    var message = document.createElement('span');
    message.id = 'loading_message';
    message.style.display = 'block';
    message.style.fontSize = '125%';
    message.style.textAlign = 'center';
    message.innerHTML = 'Your files are being uploaded.';
    box.appendChild(message);
 
    // Add a loading image.
    var img = document.createElement('img');
    img.setAttribute('src', './loading.gif');
    img.style.display = 'block';
    img.style.width = '64px';
    img.style.height = '64px';
    img.style.margin = '15px auto';
    box.appendChild(img);
}

The process.php code can then process the files and redirect to whatever page you want displayed when the upload is complete. If you keep getting a "Headers already sent" message when trying to redirect, read this article.