From 4dd4167f803c7dd3d5fd9bc586ed2363dbf954bb Mon Sep 17 00:00:00 2001 From: Jörn Friedrich Dreyer Date: Wed, 13 Mar 2013 17:25:27 +0100 Subject: refactor files.js, make proper use of fileupload events --- apps/files/js/files.js | 373 ++++++++++++++++++------------------------------- 1 file changed, 136 insertions(+), 237 deletions(-) (limited to 'apps/files/js/files.js') diff --git a/apps/files/js/files.js b/apps/files/js/files.js index 6c5536aafab..8c3a0c6bca6 100644 --- a/apps/files/js/files.js +++ b/apps/files/js/files.js @@ -247,254 +247,153 @@ $(document).ready(function() { }); if ( document.getElementById('data-upload-form') ) { - $(function() { - $('#file_upload_start').fileupload({ - dropZone: $('#content'), // restrict dropZone to content div - add: function(e, data) { - var files = data.files; - var totalSize=0; - if(files){ - if (FileList.lastAction) { - FileList.lastAction(); + $(function() { + $('#file_upload_start').fileupload({ + dropZone: $('#content'), // restrict dropZone to content div + //singleFileUploads is on by default, so the data.files array will always have length 1 + add: function(e, data) { + + if(data.files[0].type == '' && data.files[0].size == 4096) + { + data.textStatus = 'dirorzero'; + data.errorThrown = t('files','Unable to upload your file as it is a directory or has 0 bytes'); + var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload'); + fu._trigger('fail', e, data); + return true; //don't upload this file but go on with next in queue } - for(var i=0;i$('#max_upload').val()){ - $( '#uploadsize-message' ).dialog({ - modal: true, - buttons: { - Close: { - text:t('files', 'Close'), - click:function() { - $( this ).dialog( 'close' ); - } - } - } + + var totalSize=0; + $.each(data.originalFiles, function(i,file){ + totalSize+=file.size; }); - }else{ - var dropTarget = $(e.originalEvent.target).closest('tr'); - if(dropTarget && dropTarget.attr('data-type') === 'dir') { // drag&drop upload to folder - var dirName = dropTarget.attr('data-file') + + if(totalSize>$('#max_upload').val()){ + data.textStatus = 'notenoughspace'; + data.errorThrown = t('files','Not enough space available'); + var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload'); + fu._trigger('fail', e, data); + return false; //don't upload anything } - var date=new Date(); - if(files){ - for(var i=0;i0){ - var size=files[i].size; - }else{ - var size=t('files','Pending'); - } - if(files && !dirName){ - var uniqueName = getUniqueName(files[i].name); - if (uniqueName != files[i].name) { - FileList.checkName(uniqueName, files[i].name, true); - var hidden = true; - } else { - var hidden = false; - } - FileList.addFile(uniqueName,size,date,true,hidden); - } else if(dirName) { - var uploadtext = $('tr').filterAttr('data-type', 'dir').filterAttr('data-file', dirName).find('.uploadtext') - var currentUploads = parseInt(uploadtext.attr('currentUploads')); - currentUploads += 1; - uploadtext.attr('currentUploads', currentUploads); - if(currentUploads === 1) { - var img = OC.imagePath('core', 'loading.gif'); - var tr=$('tr').filterAttr('data-file',dirName); - tr.find('td.filename').attr('style','background-image:url('+img+')'); - uploadtext.text(t('files', '1 file uploading')); - uploadtext.show(); - } else { - uploadtext.text(t('files', '{count} files uploading', {count: currentUploads})); - } - } + // start the actual file upload + var jqXHR = data.submit(); + + // remember jqXHR to show warning to user when he navigates away but an upload is still in progress + if (typeof data.context !== 'undefined' && data.context.data('type') === 'dir') { + var dirName = data.context.data('file'); + if(typeof uploadingFiles[dirName] === 'undefined') { + uploadingFiles[dirName] = {}; } - }else{ - var filename=this.value.split('\\').pop(); //ie prepends C:\fakepath\ in front of the filename - var uniqueName = getUniqueName(filename); - if (uniqueName != filename) { - FileList.checkName(uniqueName, filename, true); - var hidden = true; + uploadingFiles[dirName][data.files[0].name] = jqXHR; + } else { + uploadingFiles[data.files[0].name] = jqXHR; + } + + //show cancel button + if(data.dataType !== 'iframe') { + $('#upload input.stop').show(); + } + }, + /** + * called after the first add, does NOT have the data param + * @param e + */ + start: function(e) { + //IE < 10 does not fire the necessary events for the progress bar. + if($.browser.msie && parseInt($.browser.version) < 10) { + return; + } + $('#uploadprogressbar').progressbar({value:0}); + $('#uploadprogressbar').fadeIn(); + if(data.dataType != 'iframe ') { + $('#upload input.stop').show(); + } + }, + fail: function(e, data) { + if (typeof data.textStatus !== 'undefined' && data.textStatus !== 'success' ) { + if (data.textStatus === 'abort') { + $('#notification').text(t('files', 'Upload cancelled.')); } else { - var hidden = false; + // HTTP connection problem + $('#notification').text(data.errorThrown); } - FileList.addFile(uniqueName,'Pending',date,true,hidden); + $('#notification').fadeIn(); + //hide notification after 5 sec + setTimeout(function() { + $('#notification').fadeOut(); + }, 5000); } - if($.support.xhrFileUpload) { - for(var i=0;i tr').not('[data-mime]').fadeOut(); - $('#fileList > tr').not('[data-mime]').remove(); - } - }) - .error(function(jqXHR, textStatus, errorThrown) { - if(errorThrown === 'abort') { - Files.cancelUpload(this.files[0].name); - OC.Notification.show(t('files', 'Upload cancelled.')); - } - }); - uploadingFiles[uniqueName] = jqXHR; - } + delete uploadingFiles[data.files[0].name]; + }, + progress: function(e, data) { + // TODO: show nice progress bar in file row + }, + progressall: function(e, data) { + //IE < 10 does not fire the necessary events for the progress bar. + if($.browser.msie && parseInt($.browser.version) < 10) { + return; + } + var progress = (data.loaded/data.total)*100; + $('#uploadprogressbar').progressbar('value',progress); + }, + /** + * called for every successful upload + * @param e + * @param data + */ + done:function(e, data) { + // handle different responses (json or body from iframe for ie) + var response; + if (typeof data.result === 'string') { + response = data.result; + } else { + //fetch response from iframe + response = data.result[0].body.innerText; + } + var result=$.parseJSON(response); + + if(typeof result[0] !== 'undefined' && result[0].status === 'success') { + var file = result[0]; + } else { + data.textStatus = 'servererror'; + data.errorThrown = t('files', result.data.message); + var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload'); + fu._trigger('fail', e, data); + } + + var filename = result[0].originalname; + + // delete jqXHR reference + if (typeof data.context !== 'undefined' && data.context.data('type') === 'dir') { + var dirName = data.context.data('file'); + delete uploadingFiles[dirName][filename]; + if ($.assocArraySize(uploadingFiles[dirName]) == 0) { + delete uploadingFiles[dirName]; } - }else{ - data.submit().success(function(data, status) { - // in safari data is a string - response = jQuery.parseJSON(typeof data === 'string' ? data : data[0].body.innerText); - Files.updateMaxUploadFilesize(response); - if(response[0] != undefined && response[0].status == 'success') { - var file=response[0]; - delete uploadingFiles[file.name]; - $('tr').filterAttr('data-file',file.name).data('mime',file.mime).data('id',file.id); - var size = $('tr').filterAttr('data-file',file.name).find('td.filesize').text(); - if(size==t('files','Pending')){ - var sizeElement = $('tr').filterAttr('data-file',file.name).find('td.filesize'); - sizeElement.text(simpleFileSize(file.size)); - sizeElement.attr('title',humanFileSize(file.size)); - } - //TODO update file upload size limit - FileList.loadingDone(file.name, file.id); - } else { - //TODO Files.cancelUpload(/*where do we get the filename*/); - OC.Notification.show(t('files', response.data.message)); - $('#fileList > tr').not('[data-mime]').fadeOut(); - $('#fileList > tr').not('[data-mime]').remove(); - } - }); + } else { + delete uploadingFiles[filename]; } - } - }, - fail: function(e, data) { - // TODO: cancel upload & display error notification - }, - progress: function(e, data) { - // TODO: show nice progress bar in file row - }, - progressall: function(e, data) { - //IE < 10 does not fire the necessary events for the progress bar. - if($.browser.msie && parseInt($.browser.version) < 10) { - return; - } - var progress = (data.loaded/data.total)*100; - $('#uploadprogressbar').progressbar('value',progress); - }, - start: function(e, data) { - //IE < 10 does not fire the necessary events for the progress bar. - if($.browser.msie && parseInt($.browser.version) < 10) { - return; - } - $('#uploadprogressbar').progressbar({value:0}); - $('#uploadprogressbar').fadeIn(); - if(data.dataType != 'iframe ') { - $('#upload input.stop').show(); - } - }, - stop: function(e, data) { - if(data.dataType != 'iframe ') { - $('#upload input.stop').hide(); - } - //IE < 10 does not fire the necessary events for the progress bar. - if($.browser.msie && parseInt($.browser.version) < 10) { - return; - } - $('#uploadprogressbar').progressbar('value',100); - $('#uploadprogressbar').fadeOut(); - } - }) - }); + }, + /** + * called after last upload + * @param e + * @param data + */ + stop: function(e, data) { + if(data.dataType != 'iframe ') { + $('#upload input.stop').hide(); + } + //IE < 10 does not fire the necessary events for the progress bar. + if($.browser.msie && parseInt($.browser.version) < 10) { + return; + } + + $('#uploadprogressbar').progressbar('value',100); + $('#uploadprogressbar').fadeOut(); + } + }) + }); } $.assocArraySize = function(obj) { // http://stackoverflow.com/a/6700/11236 -- cgit v1.2.3 From 831b7ca803184c5c81dc2798467903ea86277e20 Mon Sep 17 00:00:00 2001 From: Jörn Friedrich Dreyer Date: Wed, 13 Mar 2013 17:38:56 +0100 Subject: don't update progress bar in ie < 10 --- apps/files/js/files.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'apps/files/js/files.js') diff --git a/apps/files/js/files.js b/apps/files/js/files.js index 8c3a0c6bca6..59056ea8719 100644 --- a/apps/files/js/files.js +++ b/apps/files/js/files.js @@ -381,9 +381,10 @@ $(document).ready(function() { * @param data */ stop: function(e, data) { - if(data.dataType != 'iframe ') { + if(data.dataType !== 'iframe') { $('#upload input.stop').hide(); } + //IE < 10 does not fire the necessary events for the progress bar. if($.browser.msie && parseInt($.browser.version) < 10) { return; @@ -558,6 +559,7 @@ $(document).ready(function() { var eventSource=new OC.EventSource(OC.filePath('files','ajax','newfile.php'),{dir:$('#dir').val(),source:name,filename:localName}); eventSource.listen('progress',function(progress){ + //IE < 10 does not fire the necessary events for the progress bar. if($.browser.msie && parseInt($.browser.version) < 10) { } else { $('#uploadprogressbar').progressbar('value',progress); -- cgit v1.2.3 From 868d7b956d8fffcfbaf9ad5442dfd6cf8dd0874f Mon Sep 17 00:00:00 2001 From: Jörn Friedrich Dreyer Date: Wed, 27 Mar 2013 15:55:09 +0100 Subject: use === to compare empty string '' --- apps/files/js/files.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'apps/files/js/files.js') diff --git a/apps/files/js/files.js b/apps/files/js/files.js index 59056ea8719..b4f85dc720a 100644 --- a/apps/files/js/files.js +++ b/apps/files/js/files.js @@ -253,7 +253,7 @@ $(document).ready(function() { //singleFileUploads is on by default, so the data.files array will always have length 1 add: function(e, data) { - if(data.files[0].type == '' && data.files[0].size == 4096) + if(data.files[0].type === '' && data.files[0].size == 4096) { data.textStatus = 'dirorzero'; data.errorThrown = t('files','Unable to upload your file as it is a directory or has 0 bytes'); -- cgit v1.2.3 From dac875eb9c99365367f8f1f15da40c7228c466ab Mon Sep 17 00:00:00 2001 From: Jörn Friedrich Dreyer Date: Thu, 28 Mar 2013 18:50:49 +0100 Subject: '#upload' is actually '#uploadprogresswrapper', fix css and js to show cancel button correctly --- apps/files/css/files.css | 6 +++++- apps/files/js/files.js | 7 ++----- 2 files changed, 7 insertions(+), 6 deletions(-) (limited to 'apps/files/js/files.js') diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 4d2b16e6f1c..3b1c268fa09 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -45,7 +45,11 @@ } #uploadprogresswrapper { float: right; position: relative; } -#uploadprogresswrapper #uploadprogressbar { position:relative; display:inline-block; width:10em; height:1.5em; top:.4em; } +#uploadprogresswrapper #uploadprogressbar { + position:relative; float: right; + margin-left: 12px; width:10em; height:1.5em; top:.4em; + display:inline-block; +} /* FILE TABLE */ diff --git a/apps/files/js/files.js b/apps/files/js/files.js index b4f85dc720a..5060fe93f1d 100644 --- a/apps/files/js/files.js +++ b/apps/files/js/files.js @@ -291,7 +291,7 @@ $(document).ready(function() { //show cancel button if(data.dataType !== 'iframe') { - $('#upload input.stop').show(); + $('#uploadprogresswrapper input.stop').show(); } }, /** @@ -305,9 +305,6 @@ $(document).ready(function() { } $('#uploadprogressbar').progressbar({value:0}); $('#uploadprogressbar').fadeIn(); - if(data.dataType != 'iframe ') { - $('#upload input.stop').show(); - } }, fail: function(e, data) { if (typeof data.textStatus !== 'undefined' && data.textStatus !== 'success' ) { @@ -382,7 +379,7 @@ $(document).ready(function() { */ stop: function(e, data) { if(data.dataType !== 'iframe') { - $('#upload input.stop').hide(); + $('#uploadprogresswrapper input.stop').hide(); } //IE < 10 does not fire the necessary events for the progress bar. -- cgit v1.2.3 From 7ecbaef16c378a7fa972d9e9f3f81491552d8a4e Mon Sep 17 00:00:00 2001 From: Jörn Friedrich Dreyer Date: Thu, 28 Mar 2013 19:13:37 +0100 Subject: use css browser switch instead of deprecated jquery browser detection --- apps/files/js/files.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'apps/files/js/files.js') diff --git a/apps/files/js/files.js b/apps/files/js/files.js index 5060fe93f1d..6ae113a062c 100644 --- a/apps/files/js/files.js +++ b/apps/files/js/files.js @@ -290,7 +290,7 @@ $(document).ready(function() { } //show cancel button - if(data.dataType !== 'iframe') { + if($('html.lte9').length === 0 && data.dataType !== 'iframe') { $('#uploadprogresswrapper input.stop').show(); } }, @@ -300,7 +300,7 @@ $(document).ready(function() { */ start: function(e) { //IE < 10 does not fire the necessary events for the progress bar. - if($.browser.msie && parseInt($.browser.version) < 10) { + if($('html.lte9').length > 0) { return; } $('#uploadprogressbar').progressbar({value:0}); @@ -327,7 +327,7 @@ $(document).ready(function() { }, progressall: function(e, data) { //IE < 10 does not fire the necessary events for the progress bar. - if($.browser.msie && parseInt($.browser.version) < 10) { + if($('html.lte9').length > 0) { return; } var progress = (data.loaded/data.total)*100; @@ -383,7 +383,7 @@ $(document).ready(function() { } //IE < 10 does not fire the necessary events for the progress bar. - if($.browser.msie && parseInt($.browser.version) < 10) { + if($('html.lte9').length > 0) { return; } @@ -548,7 +548,7 @@ $(document).ready(function() { } localName = getUniqueName(localName); //IE < 10 does not fire the necessary events for the progress bar. - if($.browser.msie && parseInt($.browser.version) < 10) { + if($('html.lte9').length > 0) { } else { $('#uploadprogressbar').progressbar({value:0}); $('#uploadprogressbar').fadeIn(); @@ -557,7 +557,7 @@ $(document).ready(function() { var eventSource=new OC.EventSource(OC.filePath('files','ajax','newfile.php'),{dir:$('#dir').val(),source:name,filename:localName}); eventSource.listen('progress',function(progress){ //IE < 10 does not fire the necessary events for the progress bar. - if($.browser.msie && parseInt($.browser.version) < 10) { + if($('html.lte9').length > 0) { } else { $('#uploadprogressbar').progressbar('value',progress); } @@ -783,7 +783,7 @@ var dragOptions={ } } // sane browsers support using the distance option -if ( ! $.browser.msie) { +if ( $('html.ie').length === 0) { dragOptions['distance'] = 20; } -- cgit v1.2.3