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

diff --git a/files/css/files.css b/files/css/files.css
index 40ce67c66fff0ce920fa79813992504efcc3a646..f4da6fae98cb30dc6fe9808c067f3902c71b6cd4 100644 (file)
--- a/files/css/files.css
+++ b/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;
 }
 

diff --git a/files/js/files.js b/files/js/files.js
index af0c344f18dc335250e6173660e568356bd5c609..d4191215972bb6dc7237505af63d9985c2a0445b 100644 (file)
--- a/files/js/files.js
+++ b/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')
        }
 });
 

diff --git a/files/templates/index.php b/files/templates/index.php
index 2ee3651836fb98a6148c9ae16c56a3659fa468ce..efc929006379d541099fe2f62b943cf85ec12513 100644 (file)
--- a/files/templates/index.php
+++ b/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;