1
0
mirror of https://github.com/misterunknown/ifm.git synced 2025-08-11 10:34:00 +02:00

allow selecting multiple files to upload

This commit is contained in:
Marco Dickert
2017-07-24 00:43:12 +02:00
parent 2370bd4c97
commit 38059e9e69
4 changed files with 72 additions and 36 deletions

View File

@@ -422,7 +422,7 @@ f00bar;
<div class="modal-body"> <div class="modal-body">
<fieldset> <fieldset>
<label>Upload file</label><br> <label>Upload file</label><br>
<input class="file" type="file" name="ufile" id="ufile"><br> <input class="file" type="file" name="files" multiple><br>
<label>new filename</label> <label>new filename</label>
<input class="form-control" type="text" name="newfilename"><br> <input class="form-control" type="text" name="newfilename"><br>
</fieldset> </fieldset>
@@ -1298,8 +1298,21 @@ function IFM( params ) {
self.showModal( self.templates.uploadfile ); self.showModal( self.templates.uploadfile );
var form = $('#formUploadFile'); var form = $('#formUploadFile');
form.find( 'input[name=newfilename]' ).on( 'keypress', self.preventEnter ); form.find( 'input[name=newfilename]' ).on( 'keypress', self.preventEnter );
form.find( '#buttonUpload' ).on( 'click', function() { form.find( 'input[name=files]' ).on( 'change', function( e ) {
self.uploadFile(); if( e.target.files.length > 1 )
form.find( 'input[name=newfilename]' ).attr( 'readonly', true );
else
form.find( 'input[name=newfilename]' ).attr( 'readonly', false );
});
form.find( '#buttonUpload' ).on( 'click', function( e ) {
e.preventDefault();
var files = form.find( 'input[name=files]' )[0].files;
if( files.length > 1 )
for( var i = 0; i < files.length; i++ ) {
self.uploadFile( files[i] );
}
else
self.uploadFile( files[0], form.find( 'input[name=newfilename]' ).val() );
self.hideModal(); self.hideModal();
return false; return false;
}); });
@@ -1312,14 +1325,13 @@ function IFM( params ) {
/** /**
* Uploads a file * Uploads a file
*/ */
this.uploadFile = function() { this.uploadFile = function( file, newfilename ) {
var ufile = document.getElementById( 'ufile' ).files[0];
var data = new FormData(); var data = new FormData();
var newfilename = $("#formUploadFile input[name^=newfilename]").val(); data.append( 'api', 'upload' );
data.append('api', 'upload'); data.append( 'dir', self.currentDir );
data.append('dir', self.currentDir); data.append( 'file', file );
data.append('file', ufile); if( newfilename )
data.append('newfilename', newfilename); data.append( 'newfilename', newfilename );
var id = self.generateGuid(); var id = self.generateGuid();
$.ajax({ $.ajax({
url: self.api, url: self.api,
@@ -1331,7 +1343,7 @@ function IFM( params ) {
xhr: function(){ xhr: function(){
var xhr = $.ajaxSettings.xhr() ; var xhr = $.ajaxSettings.xhr() ;
xhr.upload.onprogress = function(evt){ self.task_update(evt.loaded/evt.total*100,id); } ; xhr.upload.onprogress = function(evt){ self.task_update(evt.loaded/evt.total*100,id); } ;
xhr.upload.onload = function(){ console.log('Uploading '+newfilename+' done.') } ; xhr.upload.onload = function(){ console.log('Uploading '+file.name+' done.') } ;
return xhr ; return xhr ;
}, },
success: function(data) { success: function(data) {
@@ -1343,7 +1355,7 @@ function IFM( params ) {
error: function() { self.showMessage("General error occured", "e"); }, error: function() { self.showMessage("General error occured", "e"); },
complete: function() { self.task_done(id); } complete: function() { self.task_done(id); }
}); });
self.task_add("Upload "+ufile.name, id); self.task_add("Upload "+file.name, id);
}; };
/** /**

36
ifm.php
View File

@@ -422,7 +422,7 @@ f00bar;
<div class="modal-body"> <div class="modal-body">
<fieldset> <fieldset>
<label>Upload file</label><br> <label>Upload file</label><br>
<input class="file" type="file" name="ufile" id="ufile"><br> <input class="file" type="file" name="files" multiple><br>
<label>new filename</label> <label>new filename</label>
<input class="form-control" type="text" name="newfilename"><br> <input class="form-control" type="text" name="newfilename"><br>
</fieldset> </fieldset>
@@ -1298,8 +1298,21 @@ function IFM( params ) {
self.showModal( self.templates.uploadfile ); self.showModal( self.templates.uploadfile );
var form = $('#formUploadFile'); var form = $('#formUploadFile');
form.find( 'input[name=newfilename]' ).on( 'keypress', self.preventEnter ); form.find( 'input[name=newfilename]' ).on( 'keypress', self.preventEnter );
form.find( '#buttonUpload' ).on( 'click', function() { form.find( 'input[name=files]' ).on( 'change', function( e ) {
self.uploadFile(); if( e.target.files.length > 1 )
form.find( 'input[name=newfilename]' ).attr( 'readonly', true );
else
form.find( 'input[name=newfilename]' ).attr( 'readonly', false );
});
form.find( '#buttonUpload' ).on( 'click', function( e ) {
e.preventDefault();
var files = form.find( 'input[name=files]' )[0].files;
if( files.length > 1 )
for( var i = 0; i < files.length; i++ ) {
self.uploadFile( files[i] );
}
else
self.uploadFile( files[0], form.find( 'input[name=newfilename]' ).val() );
self.hideModal(); self.hideModal();
return false; return false;
}); });
@@ -1312,14 +1325,13 @@ function IFM( params ) {
/** /**
* Uploads a file * Uploads a file
*/ */
this.uploadFile = function() { this.uploadFile = function( file, newfilename ) {
var ufile = document.getElementById( 'ufile' ).files[0];
var data = new FormData(); var data = new FormData();
var newfilename = $("#formUploadFile input[name^=newfilename]").val(); data.append( 'api', 'upload' );
data.append('api', 'upload'); data.append( 'dir', self.currentDir );
data.append('dir', self.currentDir); data.append( 'file', file );
data.append('file', ufile); if( newfilename )
data.append('newfilename', newfilename); data.append( 'newfilename', newfilename );
var id = self.generateGuid(); var id = self.generateGuid();
$.ajax({ $.ajax({
url: self.api, url: self.api,
@@ -1331,7 +1343,7 @@ function IFM( params ) {
xhr: function(){ xhr: function(){
var xhr = $.ajaxSettings.xhr() ; var xhr = $.ajaxSettings.xhr() ;
xhr.upload.onprogress = function(evt){ self.task_update(evt.loaded/evt.total*100,id); } ; xhr.upload.onprogress = function(evt){ self.task_update(evt.loaded/evt.total*100,id); } ;
xhr.upload.onload = function(){ console.log('Uploading '+newfilename+' done.') } ; xhr.upload.onload = function(){ console.log('Uploading '+file.name+' done.') } ;
return xhr ; return xhr ;
}, },
success: function(data) { success: function(data) {
@@ -1343,7 +1355,7 @@ function IFM( params ) {
error: function() { self.showMessage("General error occured", "e"); }, error: function() { self.showMessage("General error occured", "e"); },
complete: function() { self.task_done(id); } complete: function() { self.task_done(id); }
}); });
self.task_add("Upload "+ufile.name, id); self.task_add("Upload "+file.name, id);
}; };
/** /**

View File

@@ -610,8 +610,21 @@ function IFM( params ) {
self.showModal( self.templates.uploadfile ); self.showModal( self.templates.uploadfile );
var form = $('#formUploadFile'); var form = $('#formUploadFile');
form.find( 'input[name=newfilename]' ).on( 'keypress', self.preventEnter ); form.find( 'input[name=newfilename]' ).on( 'keypress', self.preventEnter );
form.find( '#buttonUpload' ).on( 'click', function() { form.find( 'input[name=files]' ).on( 'change', function( e ) {
self.uploadFile(); if( e.target.files.length > 1 )
form.find( 'input[name=newfilename]' ).attr( 'readonly', true );
else
form.find( 'input[name=newfilename]' ).attr( 'readonly', false );
});
form.find( '#buttonUpload' ).on( 'click', function( e ) {
e.preventDefault();
var files = form.find( 'input[name=files]' )[0].files;
if( files.length > 1 )
for( var i = 0; i < files.length; i++ ) {
self.uploadFile( files[i] );
}
else
self.uploadFile( files[0], form.find( 'input[name=newfilename]' ).val() );
self.hideModal(); self.hideModal();
return false; return false;
}); });
@@ -624,14 +637,13 @@ function IFM( params ) {
/** /**
* Uploads a file * Uploads a file
*/ */
this.uploadFile = function() { this.uploadFile = function( file, newfilename ) {
var ufile = document.getElementById( 'ufile' ).files[0];
var data = new FormData(); var data = new FormData();
var newfilename = $("#formUploadFile input[name^=newfilename]").val(); data.append( 'api', 'upload' );
data.append('api', 'upload'); data.append( 'dir', self.currentDir );
data.append('dir', self.currentDir); data.append( 'file', file );
data.append('file', ufile); if( newfilename )
data.append('newfilename', newfilename); data.append( 'newfilename', newfilename );
var id = self.generateGuid(); var id = self.generateGuid();
$.ajax({ $.ajax({
url: self.api, url: self.api,
@@ -643,7 +655,7 @@ function IFM( params ) {
xhr: function(){ xhr: function(){
var xhr = $.ajaxSettings.xhr() ; var xhr = $.ajaxSettings.xhr() ;
xhr.upload.onprogress = function(evt){ self.task_update(evt.loaded/evt.total*100,id); } ; xhr.upload.onprogress = function(evt){ self.task_update(evt.loaded/evt.total*100,id); } ;
xhr.upload.onload = function(){ console.log('Uploading '+newfilename+' done.') } ; xhr.upload.onload = function(){ console.log('Uploading '+file.name+' done.') } ;
return xhr ; return xhr ;
}, },
success: function(data) { success: function(data) {
@@ -655,7 +667,7 @@ function IFM( params ) {
error: function() { self.showMessage("General error occured", "e"); }, error: function() { self.showMessage("General error occured", "e"); },
complete: function() { self.task_done(id); } complete: function() { self.task_done(id); }
}); });
self.task_add("Upload "+ufile.name, id); self.task_add("Upload "+file.name, id);
}; };
/** /**

View File

@@ -2,7 +2,7 @@
<div class="modal-body"> <div class="modal-body">
<fieldset> <fieldset>
<label>Upload file</label><br> <label>Upload file</label><br>
<input class="file" type="file" name="ufile" id="ufile"><br> <input class="file" type="file" name="files" multiple><br>
<label>new filename</label> <label>new filename</label>
<input class="form-control" type="text" name="newfilename"><br> <input class="form-control" type="text" name="newfilename"><br>
</fieldset> </fieldset>