Solved

File Upload Progress bar

Posted on 2004-04-29
14
61,548 Views
Last Modified: 2011-08-18
I have users uploading files of up to 50MB or more through the website I maintain.  The problem is, many users are apparently getting frustrated without seeing feedback on the progress of their upload - so they resubmit after a couple minutes or close the browser.

I'm running a LAMP setup; linux, apache, mysql, php...  Any suggestions for a way to display this upload progress bar based upon the progress of the upload?

If javascript can monitor the progress of uploads, that would be the most ideal solution - something running on the client's end...

Appreciate your thoughts,

Cedrick
0
Comment
Question by:minnirok
  • 4
  • 3
  • 2
  • +3
14 Comments
 
LVL 36

Accepted Solution

by:
Zyloch earned 175 total points
ID: 10952960
The code to do this in PHP is here for download: http://sourceforge.net/projects/megaupload/

The website is: http://www.raditha.com/php/progress.php

The demo is: http://www.raditha.com/php/upload.php

--Zyloch
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 75 total points
ID: 10953038
There is no way for the client to know the size of the file, or to monitor how much has been sent.  The best you can do is use a popup window to simulate a progress bar of of the submit

<input type="submit" on Click="window.open('progress.htm')">

Cd&
0
 
LVL 7

Author Comment

by:minnirok
ID: 10953254
Yeah, I'd thought of a popup window refreshing with the an update on the upload info.  Looks like that method has been implemented in the sorceforge "megaupload" project...

I was hoping for a more elegant idea, but yeah, a client side solution would need to be able to monitor the amount of data that had been sent.  I suppose the key limitation is Javascript's inability to run time-based functions.

I don't suppose flash has any tricks for this sorta thing, similar to a loading movie animation?

Obviously the main window can't be refreshed or the upload would be reset...  So unless there's some browser plug-in software out there with some magic abilities, it seems the pop-up window is the only way to go.  I'm going to leave this question open a few days in the hopes that somebody can prove that this assertion is wrong...

Cedrick
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 36

Expert Comment

by:Zyloch
ID: 10953926
This is possible with ASP and JavaScript it seems.

http://www.atgconsulting.com/progressbar.asp

This is a site that has this working. However, I cannot understand ASP for my life so I will try to find a way to implement this with PHP.

--Zyloch
0
 

Expert Comment

by:SteffenM
ID: 10963122
Hi!

I'm not 100% sure about it, but as far as i know most web browsers display already parts of websites when the transmission is not finished yet. The idea is that you send "half a page" when beginning the upload and when the upload is finished, you send the second part.

The first part might contain an animated gif showing a progress bar, the second part a javascript exchanging the animated gif. Pseudo-Example:

<html>
<head>bla</head>
<body><img src="/pics/loader.gif">

// in your script, wait until the file is uploaded

<javascript src="exchangeLoader">
The file is uploaded!
</body>

The waiting until the file is uploaded might be a little complicated, perhaps you can set a flag in a file when the uploading is finished. The popup window displays the bar, while the main window uploads and finally sets the flag the popup window waits for.

Hope I could help you,
best wishes,

Steffen
0
 
LVL 1

Expert Comment

by:cluedon
ID: 11031873

If you're willing to spend a little money you can get a site license for an activeX control that will do it for you...
  http://www.aspupload.com/xupload.html works with php or perl on the server

Otherwise you need to a way to see upload progress on the server, which I don't think you can do with php.  mod_perl allows you to do it using Apache::Request and the upload hook.   Once you have a way to see upload progress on the server you can alter an image file on the server as the upload progresses, then use javascript to have the image reload in a seperate browser window for the user.

If perl is a viable option for you take a look at these
 http://www.experts-exchange.com/Web/Web_Languages/CGI/Q_20862752.html
http://search.cpan.org/~joesuf/libapreq-1.3/Request/Request.pm

I haven't used this, but this looks like a promising helper alternative to changing image files:  http://search.cpan.org/~lgoddard/CGI-ProgressBar-0.02/ProgressBar.pm


0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12546904
Points to Zyloch IMHO.

Cd&
0
 
LVL 7

Author Comment

by:minnirok
ID: 12547902
Megaupload garbles session information between transmission from perl back to php, making it rather ineffective for sites w/ login sessions such as the one I had been working on...   As such, I was unable to use it.  I never found an ideal solution as PHP is incapable of monitoring incoming file streams by itself.  So while I do appreciate having been informed of megaupload, I didn't find it useful enough to warrant 250 points.  I did end up using a javascript simulation of the upload, akin to Cd&'s suggestion - so some sort of split was in order.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12549311
The C is not an acceptable grade.  If my comment help then based on the grading quidelines the grade should be a B and if it did not help then all you had to do was ask for the question to be deleted.

I will be asking for a moderator to review the thread.

Cd&
0
 
LVL 7

Author Comment

by:minnirok
ID: 12551121
The grade of 'C' actually is quite appropriate by EE's own grading system given that the topic "lacks finality".  

EXERPT FROM THE GRADE GUIDELINES: the answers, after clarification, lack finality or do not completely address the issue presented, then a "C" grade is an option

The answers here were not exceptionally helpful as they did not solve the problem.  I awarded points for this topic under the impression that asking for my question to be deleted would have been bad ettiquete considering the good-faith attempts at helping me.  My understanding of a "C" grade seems quite different from the negative reaction to it here on EE.  In academia, a "C" has traditionally been viewed as "average" - a term that should be by all means respectable.  In a traditional grading system, I'd consider a "B" grade in this case to be contributing to a culture of grade inflation.  But grading standards aside, allow me to restate that I am grateful for this forum and to both Zyloch, Cd& and the others for their taking the time to respond.  My grade was not an act of malice.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12554878
>>> In academia, a "C" has traditionally been viewed as "average" - a term that should be by all means respectable.  

I agree, but this is not acedemia where the C is in the mid-range of grading.  The C is the lowest grade that you can award, and is therefore regard as a failing grade.  You will find many of the top-experts prefer deletion over a C grade.  

An appropriate delete is not bad etiquette.  The process also requires the moderator to allow comments by the participants in the thread before deleting, and my experience has been that there is educational value for both experts and questioners that helps to improve communications.

At this point I would still agree to a deletion if you think the B is not the correct grade.  It is not about points, but applying grades that members can use as a guide when they are searching the database.

Cd&
0
 

Expert Comment

by:natfuse
ID: 13816017
It seems that someone found a workaround to the problem with the session variables:

http://sourceforge.net/tracker/?group_id=87646&atid=583884&func=detail&aid=1092068

0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question