Solved

File Upload Progress bar

Posted on 2004-04-29
14
61,542 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 36

Expert Comment

by:Zyloch
Comment Utility
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
Comment Utility
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
Comment Utility

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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
Points to Zyloch IMHO.

Cd&
0
 
LVL 7

Author Comment

by:minnirok
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
>>> 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
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

771 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now