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

This commit is contained in:
Robin Appelman 2011-07-20 15:50:42 +02:00
parent 5539f67135
commit 6b034ad2f9
3 changed files with 38 additions and 24 deletions

View File

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

View File

@ -143,11 +143,15 @@ $(document).ready(function() {
return false; return false;
}); });
$('#file_upload_start').change(function(){ $('.file_upload_start').live('change',function(){
var files=$('#file_upload_start')[0].files; var form=$(this).parent().parent();
$('#file_upload_target').load(function(){ var uploadId=form.attr('data-upload-id');
var response=jQuery.parseJSON($('#file_upload_target').contents().find('body').text()); 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 //set mimetype and if needed filesize
if(response){
for(var i=0;i<response.length;i++){ for(var i=0;i<response.length;i++){
var file=response[i]; var file=response[i];
$('tr[data-file="'+file.name+'"]').attr('data-mime',file.mime); $('tr[data-file="'+file.name+'"]').attr('data-mime',file.mime);
@ -156,8 +160,9 @@ $(document).ready(function() {
} }
FileList.loadingDone(file.name); FileList.loadingDone(file.name);
} }
}
}); });
$('#file_upload_form').submit(); form.submit();
var date=new Date(); var date=new Date();
var uploadTime=formatDate(date); var uploadTime=formatDate(date);
for(var i=0;i<files.length;i++){ for(var i=0;i<files.length;i++){
@ -168,11 +173,20 @@ $(document).ready(function() {
} }
FileList.addFile(files[i].name,size,uploadTime,true); 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) //add multiply file upload attribute to all browsers except konqueror (which crashes when it's used)
if(navigator.userAgent.search(/konqueror/i)==-1){ if(navigator.userAgent.search(/konqueror/i)==-1){
$('#file_upload_start').attr('multiple','multiple') $('.file_upload_start').attr('multiple','multiple')
} }
}); });

View File

@ -1,14 +1,14 @@
<div class="controls"> <div class="controls">
<div class="actions"> <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" 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" class="max_human_file_size" value="(max <?php echo $_["uploadMaxHumanFilesize"]; ?>)">
<input type="hidden" name="dir" value="<?php echo $_["dir"] ?>" id="dir"> <input type="hidden" name="dir" value="<?php echo $_["dir"] ?>" id="dir">
<div id='file_upload_wrapper'> <div class='file_upload_wrapper'>
<input class="prettybutton" id='file_upload_filename' value="Upload (max. <?php echo $_["uploadMaxHumanFilesize"];?>)"/> <input class="prettybutton file_upload_filename" value="Upload (max. <?php echo $_["uploadMaxHumanFilesize"];?>)"/>
<input class="prettybutton" type="file" id="file_upload_start" name='files[]'/> <input class="prettybutton file_upload_start" type="file" name='files[]'/>
</div>&nbsp; </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>
<form id="file_newfolder_form"> <form id="file_newfolder_form">
<input type="text" class="prettybutton" name="file_newfolder_name" id="file_newfolder_name" value="New Folder" />&nbsp; <input type="text" class="prettybutton" name="file_newfolder_name" id="file_newfolder_name" value="New Folder" />&nbsp;