$10 For Best Solution<- How do I add progress bar to upload form?

Discussion in 'Programming' started by raymond222, Jun 27, 2009.

  1. #1
    Hey, DPers
    Wanted to post this in general programming forum, but thought a little cash reward would speed things up:)
    Anyways I need to add a progress bar to my upload form. Shows a bar, percentage completed, data completed/total size (like 1kb/10kb) and estimated time available. Like Youtube's upload for example.

    I know a good programmer doesn't reinvent the wheel every time. I did find some upload progress bars but they all included a sophisticated upload mechanism which I don't need.

    So if you could give me a piece of code to add to my form and any files needed, I'd send you $10 to your paypal right away.

    This is the basic html form:
    <form action="converter.php" method="POST" enctype="multipart/form-data">
    	<input type="file" name="file">
    	<input type="hidden" name="type" value="video">
    	<input type="submit" value="submit">
    </form>
    PHP:
    So if you've got ideas, just post here and I'll send you $10 right away for best working answer:)

    Thank you!

    Chris
     
    raymond222, Jun 27, 2009 IP
  2. farhang

    farhang Active Member

    Messages:
    383
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
  3. raymond222

    raymond222 Active Member

    Messages:
    287
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    60
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #3
    Thanks for the link.
    It's everything but progress bar an everything but simple (I'm not a coder, the reason why I'm asking for a simple method).

    Still searching for a solution to this.

    Thanks

    Chris
     
    raymond222, Jun 27, 2009 IP
  4. ansi

    ansi Well-Known Member

    Messages:
    1,483
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    100
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #4
    swfupload would be the best solution out there at the moment.
     
    ansi, Jun 27, 2009 IP
  5. farhang

    farhang Active Member

    Messages:
    383
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
  6. farhang

    farhang Active Member

    Messages:
    383
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #6
    farhang, Jun 27, 2009 IP
  7. raymond222

    raymond222 Active Member

    Messages:
    287
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    60
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #7
    Thanks for the comments. I'm reading the swfupload thing and see what happens.
    Farhang, you'll get your reward :) (pm me your paypal)

    Chris
     
    raymond222, Jun 27, 2009 IP
  8. James Barcellano

    James Barcellano Active Member

    Messages:
    114
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #8
    James Barcellano, Jun 27, 2009 IP
  9. raymond222

    raymond222 Active Member

    Messages:
    287
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    60
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #9
    here's how I tried to set this thing up:
    used one of the sample scripts and modified the action to be my converter.php (the original upload script that does my conversion and all the stuff)
    <?php
    	session_start();
    
    	if (count($_FILES)) {
            // Handle degraded form uploads here.  Degraded form uploads are POSTed to index.php.  SWFUpload uploads
    		// are POSTed to upload.php
    	}
    
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title>SWFUpload Demos - Multi-Instance Demo</title>
    <link href="default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="swfupload.js"></script>
    <script type="text/javascript" src="js/swfupload.queue.js"></script>
    <script type="text/javascript" src="js/fileprogress.js"></script>
    <script type="text/javascript" src="js/handlers.js"></script>
    <script type="text/javascript">
    		var upload1, upload2;
    
    		window.onload = function() {
    			upload1 = new SWFUpload({
    				// Backend Settings
    				upload_url: "converter.php",
    				post_params: {"PHPSESSID" : "<?php echo session_id(); ?>"},
    
    				// File Upload Settings
    				file_size_limit : "512000",	// 500MB
    				file_types : "*.*",
    				file_types_description : "All Files",
    				file_upload_limit : "10",
    				file_queue_limit : "0",
    
    				// Event Handler Settings (all my handlers are in the Handler.js file)
    				file_dialog_start_handler : fileDialogStart,
    				file_queued_handler : fileQueued,
    				file_queue_error_handler : fileQueueError,
    				file_dialog_complete_handler : fileDialogComplete,
    				upload_start_handler : uploadStart,
    				upload_progress_handler : uploadProgress,
    				upload_error_handler : uploadError,
    				upload_success_handler : uploadSuccess,
    				upload_complete_handler : uploadComplete,
    
    				// Button Settings
    				button_image_url : "XPButtonUploadText_61x22.png",
    				button_placeholder_id : "spanButtonPlaceholder1",
    				button_width: 61,
    				button_height: 22,
    				
    				// Flash Settings
    				flash_url : "swfupload.swf",
    				
    
    				custom_settings : {
    					progressTarget : "fsUploadProgress1",
    					cancelButtonId : "btnCancel1"
    				},
    				
    				// Debug Settings
    				debug: true
    			});
    		}
    	</script>
    </head>
    <body>
    <div id="content">
    	<h2>Multi-Instance Demo</h2>
    	<form id="form1" action="converter.php" method="post" enctype="multipart/form-data">
    		<p>This page demonstrates how multiple instances of SWFUpload can be loaded on the same page.
    			It also demonstrates the use of the graceful degradation plugin and the queue plugin.</p>
    		<table>
    			<tr valign="top">
    				<td>
    					<div>
    						<div class="fieldset flash" id="fsUploadProgress1">
    							<span class="legend">Large File Upload Site</span>
    						</div>
    						<div style="padding-left: 5px;">
    							<span id="spanButtonPlaceholder1"></span>
    							<input id="btnCancel1" type="button" value="Cancel Uploads" onclick="cancelQueue(upload1);" disabled="disabled" style="margin-left: 2px; height: 22px; font-size: 8pt;" />
    							<br />
    						</div>
    					</div>
    				</td>
    			</tr>
    		</table>
    	</form>
    </div>
    </body>
    </html>
    
    PHP:
    I can start uploading a file, but I get a 500 error right after the progress bar is full:confused:. Farhang, wana set it up for me?:D

    Chris
     
    raymond222, Jun 27, 2009 IP
  10. farhang

    farhang Active Member

    Messages:
    383
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #10
    Sending you a PM
     
    farhang, Jun 28, 2009 IP