Allow users to start a new upload before the current upload has finished

files/css/files.css

@@ -20,7 +20,7 @@
     text-decoration: none;
 }
 
-#file_upload_form, #file_newfolder_form {
+.file_upload_form, #file_newfolder_form {
 	display: inline;
 	margin-left:3em;
 }
@@ -29,23 +29,23 @@
 	display: none;
 }
 
-#file_upload_filename, #file_newfolder_name {
+.file_upload_filename, #file_newfolder_name {
 	background-repeat: no-repeat;
 	background-position: 0.5em 0;
 	padding-left: 2em;
 }
 
-#file_upload_filename {
+.file_upload_filename {
 	background-image:url(../img/file.png); font-weight:bold;
 }
-#file_upload_start {opacity:0;filter: alpha(opacity = 0);}
+.file_upload_start {opacity:0;filter: alpha(opacity = 0);}
 
 #file_newfolder_name {
 	background-image:url(../img/folder.png); font-weight:bold; 
 	width: 14em;
 }
 
-#file_upload_start, #file_upload_filename{
+.file_upload_start, .file_upload_filename{
 	position:absolute;
 	top:0px;
 	left:0px;
@@ -53,7 +53,7 @@
 	font-size: 0.9em;
 }
 
-#file_upload_wrapper{
+.file_upload_wrapper{
 	position:relative;
 	top:-1.2em;
 	left:-2em;
@@ -66,7 +66,7 @@
 	width: 3em;
 }
 
-#file_upload_target {
+.file_upload_target {
 	display: none;
 }
 

files/js/files.js

@@ -143,21 +143,26 @@ $(document).ready(function() {
 		return false;
 	});
 
-	$('#file_upload_start').change(function(){
-		var files=$('#file_upload_start')[0].files;
-		$('#file_upload_target').load(function(){
-			var response=jQuery.parseJSON($('#file_upload_target').contents().find('body').text());
+	$('.file_upload_start').live('change',function(){
+		var form=$(this).parent().parent();
+		var uploadId=form.attr('data-upload-id');
+		var files=this.files;
+		var target=form.children('iframe');
+		target.load(function(){
+			var response=jQuery.parseJSON(target.contents().find('body').text());
 			//set mimetype and if needed filesize
-			for(var i=0;i<response.length;i++){
-				var file=response[i];
-				$('tr[data-file="'+file.name+'"]').attr('data-mime',file.mime);
-				if(size=='Pending'){
-					$('tr[data-file='+file.name+'] td.filesize').text(file.size);
+			if(response){
+				for(var i=0;i<response.length;i++){
+					var file=response[i];
+					$('tr[data-file="'+file.name+'"]').attr('data-mime',file.mime);
+					if(size=='Pending'){
+						$('tr[data-file='+file.name+'] td.filesize').text(file.size);
+					}
+					FileList.loadingDone(file.name);
 				}
-				FileList.loadingDone(file.name);
 			}
 		});
-		$('#file_upload_form').submit();
+		form.submit();
 		var date=new Date();
 		var uploadTime=formatDate(date);
 		for(var i=0;i<files.length;i++){
@@ -168,11 +173,20 @@ $(document).ready(function() {
 			}
 			FileList.addFile(files[i].name,size,uploadTime,true);
 		}
+		
+		//clone the upload form and hide the new one to allow users to start a new upload while the old one is still uploading
+		var clone=form.clone();
+		uploadId++;
+		clone.attr('data-upload-id',uploadId);
+		clone.attr('target','file_upload_target_'+uploadId);
+		clone.children('iframe').attr('name','file_upload_target_'+uploadId)
+		clone.insertBefore(form);
+		form.hide();
 	});
 	
 	//add multiply file upload attribute to all browsers except konqueror (which crashes when it's used)
 	if(navigator.userAgent.search(/konqueror/i)==-1){
-		$('#file_upload_start').attr('multiple','multiple')
+		$('.file_upload_start').attr('multiple','multiple')
 	}
 });
 

files/templates/index.php

@@ -1,14 +1,14 @@
 <div class="controls">
 	<div class="actions">
-		<form id="file_upload_form" action="ajax/upload.php" method="post" enctype="multipart/form-data" target="file_upload_target">
+		<form data-upload-id='1' class="file_upload_form" action="ajax/upload.php" method="post" enctype="multipart/form-data" target="file_upload_target_1">
 			<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $_["uploadMaxFilesize"] ?>" id="max_upload">
 			<input type="hidden" class="max_human_file_size" value="(max <?php echo $_["uploadMaxHumanFilesize"]; ?>)">
 			<input type="hidden" name="dir" value="<?php echo $_["dir"] ?>" id="dir">
-			<div id='file_upload_wrapper'>
-				<input class="prettybutton" id='file_upload_filename' value="Upload (max. <?php echo $_["uploadMaxHumanFilesize"];?>)"/>
-				<input class="prettybutton" type="file" id="file_upload_start" name='files[]'/>
+			<div class='file_upload_wrapper'>
+				<input class="prettybutton file_upload_filename" value="Upload (max. <?php echo $_["uploadMaxHumanFilesize"];?>)"/>
+				<input class="prettybutton file_upload_start" type="file" name='files[]'/>
 			</div>&nbsp;
-			<iframe id="file_upload_target" name="file_upload_target" src=""></iframe>
+			<iframe name="file_upload_target_1" class='file_upload_target' src=""></iframe>
 		</form>
 		<form id="file_newfolder_form">
 			<input type="text" class="prettybutton" name="file_newfolder_name" id="file_newfolder_name" value="New Folder" />&nbsp;