diff options
-rw-r--r-- | apps/files/ajax/upload.php | 63 | ||||
-rw-r--r-- | apps/files/css/files.css | 84 | ||||
-rw-r--r-- | apps/files/js/file-upload.js | 719 | ||||
-rw-r--r-- | apps/files/js/fileactions.js | 2 | ||||
-rw-r--r-- | apps/files/js/filelist.js | 322 | ||||
-rw-r--r-- | apps/files/js/files.js | 62 | ||||
-rw-r--r-- | apps/files/js/jquery.fileupload.js | 1023 | ||||
-rw-r--r-- | apps/files/js/jquery.iframe-transport.js | 70 | ||||
-rw-r--r-- | apps/files/templates/fileexists.html | 26 | ||||
-rw-r--r-- | apps/files_sharing/js/public.js | 7 | ||||
-rw-r--r-- | core/img/actions/triangle-e.png | bin | 0 -> 175 bytes | |||
-rw-r--r-- | core/img/actions/triangle-e.svg | 54 | ||||
-rw-r--r-- | core/js/jquery.ocdialog.js | 6 | ||||
-rw-r--r-- | core/js/oc-dialogs.js | 191 |
14 files changed, 2002 insertions, 627 deletions
diff --git a/apps/files/ajax/upload.php b/apps/files/ajax/upload.php index 1d03cd89f83..ec313030ed1 100644 --- a/apps/files/ajax/upload.php +++ b/apps/files/ajax/upload.php @@ -98,26 +98,53 @@ $result = array(); if (strpos($dir, '..') === false) { $fileCount = count($files['name']); for ($i = 0; $i < $fileCount; $i++) { - $target = OCP\Files::buildNotExistingFileName(stripslashes($dir), $files['name'][$i]); // $path needs to be normalized - this failed within drag'n'drop upload to a sub-folder - $target = \OC\Files\Filesystem::normalizePath($target); - if (is_uploaded_file($files['tmp_name'][$i]) and \OC\Files\Filesystem::fromTmpFile($files['tmp_name'][$i], $target)) { + if (isset($_POST['newname'])) { + $newName = $_POST['newname']; + } else { + $newName = $files['name'][$i]; + } + if (isset($_POST['replace']) && $_POST['replace'] == true) { + $replace = true; + } else { + $replace = false; + } + $target = \OC\Files\Filesystem::normalizePath(stripslashes($dir).'/'.$newName); + if ( ! $replace && \OC\Files\Filesystem::file_exists($target)) { $meta = \OC\Files\Filesystem::getFileInfo($target); - // updated max file size after upload - $storageStats = \OCA\files\lib\Helper::buildFileStorageStatistics($dir); - if ($meta === false) { - OCP\JSON::error(array('data' => array_merge(array('message' => $l->t('Upload failed')), $storageStats))); - exit(); - } else { - $result[] = array('status' => 'success', - 'mime' => $meta['mimetype'], - 'size' => $meta['size'], - 'id' => $meta['fileid'], - 'name' => basename($target), - 'originalname' => $files['name'][$i], - 'uploadMaxFilesize' => $maxUploadFileSize, - 'maxHumanFilesize' => $maxHumanFileSize - ); + $result[] = array('status' => 'existserror', + 'type' => $meta['mimetype'], + 'mtime' => $meta['mtime'], + 'size' => $meta['size'], + 'id' => $meta['fileid'], + 'name' => basename($target), + 'originalname' => $newName, + 'uploadMaxFilesize' => $maxUploadFileSize, + 'maxHumanFilesize' => $maxHumanFileSize + ); + } else { + //$target = OCP\Files::buildNotExistingFileName(stripslashes($dir), $files['name'][$i]); + if (is_uploaded_file($files['tmp_name'][$i]) and \OC\Files\Filesystem::fromTmpFile($files['tmp_name'][$i], $target)) { + $meta = \OC\Files\Filesystem::getFileInfo($target); + + // updated max file size after upload + $storageStats = \OCA\files\lib\Helper::buildFileStorageStatistics($dir); + + if ($meta === false) { + OCP\JSON::error(array('data' => array_merge(array('message' => $l->t('Upload failed')), $storageStats))); + exit(); + } else { + $result[] = array('status' => 'success', + 'mime' => $meta['mimetype'], + 'mtime' => $meta['mtime'], + 'size' => $meta['size'], + 'id' => $meta['fileid'], + 'name' => basename($target), + 'originalname' => $newName, + 'uploadMaxFilesize' => $maxUploadFileSize, + 'maxHumanFilesize' => $maxHumanFileSize + ); + } } } } diff --git a/apps/files/css/files.css b/apps/files/css/files.css index b7e0d59b141..65aa29052e6 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -331,3 +331,87 @@ table.dragshadow td.size { text-align: center; margin-left: -200px; } + +.oc-dialog .fileexists table { + width: 100%; +} +.oc-dialog .fileexists th { + padding-left: 0; + padding-right: 0; +} +.oc-dialog .fileexists th input[type='checkbox'] { + margin-right: 3px; +} +.oc-dialog .fileexists th:first-child { + width: 235px; +} +.oc-dialog .fileexists th label { + font-weight: normal; + color:black; +} +.oc-dialog .fileexists th .count { + margin-left: 3px; +} +.oc-dialog .fileexists .conflict { + width: 100%; + height: 85px; +} +.oc-dialog .fileexists .conflict.template { + display: none; +} +.oc-dialog .fileexists .conflict .filename { + color:#777; + word-break: break-all; +} +.oc-dialog .fileexists .icon { + width: 64px; + height: 64px; + margin: 0px 5px 5px 5px; + background-repeat: no-repeat; + background-size: 64px 64px; + float: left; +} + +.oc-dialog .fileexists .replacement { + float: left; + width: 235px; +} +.oc-dialog .fileexists .original { + float: left; + width: 235px; +} +.oc-dialog .fileexists .conflicts { + overflow-y:scroll; + max-height: 225px; +} +.oc-dialog .fileexists .conflict input[type='checkbox'] { + float: left; +} + +.oc-dialog .fileexists .toggle { + background-image: url('%webroot%/core/img/actions/triangle-e.png'); + width: 16px; + height: 16px; +} +.oc-dialog .fileexists #allfileslabel { + float:right; +} +.oc-dialog .fileexists #allfiles { + vertical-align: bottom; + position: relative; + top: -3px; +} +.oc-dialog .fileexists #allfiles + span{ + vertical-align: bottom; +} + + + +.oc-dialog .oc-dialog-buttonrow { + width:100%; + text-align:right; +} + +.oc-dialog .oc-dialog-buttonrow .cancel { + float:left; +} diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index e9b07518bab..9af09fcdd92 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -1,64 +1,422 @@ +/** + * + * and yet another idea how to handle file uploads: + * let the jquery fileupload thing handle as much as possible + * + * use singlefileupload + * on first add of every selection + * - check all files of originalFiles array with files in dir + * - on conflict show dialog + * - skip all -> remember as default action + * - replace all -> remember as default action + * - choose -> show choose dialog + * - mark files to keep + * - when only existing -> remember as single skip action + * - when only new -> remember as single replace action + * - when both -> remember as single autorename action + * - continue -> apply marks, when nothing is marked continue == skip all + * - start uploading selection + * + * on send + * - if single action or default action + * - when skip -> abort upload + * ..- when replace -> add replace=true parameter + * ..- when rename -> add newName=filename parameter + * ..- when autorename -> add autorename=true parameter + * + * on fail + * - if server sent existserror + * - show dialog + * - on skip single -> abort single upload + * - on skip always -> remember as default action + * - on replace single -> replace single upload + * - on replace always -> remember as default action + * - on rename single -> rename single upload, propose autorename - when changed disable remember always checkbox + * - on rename always -> remember autorename as default action + * - resubmit data + * + * on uplad done + * - if last upload -> unset default action + * + * ------------------------------------------------------------- + * + * use put t ocacnel upload before it starts? use chunked uploads? + * + * 1. tracking which file to upload next -> upload queue with data elements added whenever add is called + * 2. tracking progress for each folder individually -> track progress in a progress[dirname] object + * - every new selection increases the total size and number of files for a directory + * - add increases, successful done decreases, skip decreases, cancel decreases + * 3. track selections -> the general skip / overwrite decision is selection based and can change + * - server might send already exists error -> show dialog & remember decision for selection again + * - server sends error, how do we find collection? + * 4. track jqXHR object to prevent browser from navigationg away -> track in a uploads[dirname][filename] object [x] + * + * selections can progress in parrallel but each selection progresses sequentially + * + * -> store everything in context? + * context.folder + * context.element? + * context.progressui? + * context.jqXHR + * context.selection + * context.selection.onExistsAction? + * + * context available in what events? + * build in drop() add dir + * latest in add() add file? add selection! + * progress? -> update progress? + * onsubmit -> context.jqXHR? + * fail() -> + * done() + * + * when versioning app is active -> always overwrite + * + * fileupload scenario: empty folder & d&d 20 files + * queue the 20 files + * check list of files for duplicates -> empty + * start uploading the queue (show progress dialog?) + * - no duplicates -> all good, add files to list + * - server reports duplicate -> show skip, replace or rename dialog (for individual files) + * + * fileupload scenario: files uploaded & d&d 20 files again + * queue the 20 files + * check list of files for duplicates -> find n duplicates -> + * show skip, replace or rename dialog as general option + * - show list of differences with preview (win 8) + * remember action for each file + * start uploading the queue (show progress dialog?) + * - no duplicates -> all good, add files to list + * - server reports duplicate -> use remembered action + * + * dialoge: + * -> skip, replace, choose (or abort) () + * -> choose left or right (with skip) (when only one file in list also show rename option and remember for all option) + * + * progress always based on filesize + * number of files as text, bytes as bar + * + */ + +// from https://github.com/New-Bamboo/example-ajax-upload/blob/master/public/index.html +// also see article at http://blog.new-bamboo.co.uk/2012/01/10/ridiculously-simple-ajax-uploads-with-formdata +// Function that will allow us to know if Ajax uploads are supported +function supportAjaxUploadWithProgress() { + return supportFileAPI() && supportAjaxUploadProgressEvents() && supportFormData(); + + // Is the File API supported? + function supportFileAPI() { + var fi = document.createElement('INPUT'); + fi.type = 'file'; + return 'files' in fi; + }; + + // Are progress events supported? + function supportAjaxUploadProgressEvents() { + var xhr = new XMLHttpRequest(); + return !! (xhr && ('upload' in xhr) && ('onprogress' in xhr.upload)); + }; + + // Is FormData supported? + function supportFormData() { + return !! window.FormData; + } +} + +//TODO clean uploads when all progress has completed +OC.Upload = { + /** + * map to lookup the selections for a given directory. + * @type Array + */ + _selections: {}, + _selectionCount: 0, + /* + * queue which progress tracker to use for the next upload + * @type Array + */ + _queue: [], + queueUpload:function(data) { + // add to queue + this._queue.push(data); //remember what to upload next + if ( ! this.isProcessing() ) { + this.startUpload(); + } + }, + getSelection:function(originalFiles) { + if (!originalFiles.selectionKey) { + originalFiles.selectionKey = 'selection-' + this._selectionCount++; + this._selections[originalFiles.selectionKey] = { + selectionKey:originalFiles.selectionKey, + files:{}, + totalBytes:0, + loadedBytes:0, + currentFile:0, + uploads:{}, + checked:false + }; + } + return this._selections[originalFiles.selectionKey]; + }, + cancelUpload:function(dir, filename) { + var self = this; + var deleted = false; + jQuery.each(this._selections, function(i, selection) { + if (selection.dir === dir && selection.uploads[filename]) { + deleted = self.deleteSelectionUpload(selection, filename); + return false; // end searching through selections + } + }); + return deleted; + }, + cancelUploads:function() { + console.log('canceling uploads'); + var self = this; + jQuery.each(this._selections,function(i, selection){ + self.deleteSelection(selection.selectionKey); + }); + this._queue = []; + this._isProcessing = false; + }, + _isProcessing:false, + isProcessing:function(){ + return this._isProcessing; + }, + startUpload:function(){ + if (this._queue.length > 0) { + this._isProcessing = true; + this.nextUpload(); + return true; + } else { + return false; + } + }, + nextUpload:function(){ + if (this._queue.length > 0) { + var data = this._queue.pop(); + var selection = this.getSelection(data.originalFiles); + selection.uploads[data.files[0]] = data.submit(); + + } else { + //queue is empty, we are done + this._isProcessing = false; + OC.Upload.cancelUploads(); + } + }, + progressBytes: function() { + var total = 0; + var loaded = 0; + jQuery.each(this._selections, function (i, selection) { + total += selection.totalBytes; + loaded += selection.loadedBytes; + }); + return (loaded/total)*100; + }, + loadedBytes: function() { + var loaded = 0; + jQuery.each(this._selections, function (i, selection) { + loaded += selection.loadedBytes; + }); + return loaded; + }, + totalBytes: function() { + var total = 0; + jQuery.each(this._selections, function (i, selection) { + total += selection.totalBytes; + }); + return total; + }, + onCancel:function(data) { + //TODO cancel all uploads of this selection + + var selection = this.getSelection(data.originalFiles); + OC.Upload.deleteSelection(selection.selectionKey); + //FIXME hide progressbar + }, + onContinue:function(conflicts) { + var self = this; + //iterate over all conflicts + jQuery.each(conflicts, function (i, conflict) { + conflict = $(conflict); + var keepOriginal = conflict.find('.original input[type="checkbox"]:checked').length === 1; + var keepReplacement = conflict.find('.replacement input[type="checkbox"]:checked').length === 1; + if (keepOriginal && keepReplacement) { + // when both selected -> autorename + self.onAutorename(conflict.data('data')); + } else if (keepReplacement) { + // when only replacement selected -> overwrite + self.onReplace(conflict.data('data')); + } else { + // when only original seleted -> skip + // when none selected -> skip + self.onSkip(conflict.data('data')); + } + }); + }, + onSkip:function(data){ + OC.Upload.logStatus('skip', null, data); + //var selection = this.getSelection(data.originalFiles); + //selection.loadedBytes += data.loaded; + //this.nextUpload(); + //TODO trigger skip? what about progress? + }, + onReplace:function(data){ + OC.Upload.logStatus('replace', null, data); + data.data.append('replace', true); + data.submit(); + }, + onAutorename:function(data){ + OC.Upload.logStatus('autorename', null, data); + data.data.append('autorename', true); + data.submit(); + }, + logStatus:function(caption, e, data) { + console.log(caption); + console.log(data); + }, + checkExistingFiles: function (selection, callbacks){ + // FIXME check filelist before uploading + callbacks.onNoConflicts(selection); + } +}; + $(document).ready(function() { var file_upload_param = { dropZone: $('#content'), // restrict dropZone to content div + autoUpload: false, + sequentialUploads: true, + //singleFileUploads is on by default, so the data.files array will always have length 1 + /** + * on first add of every selection + * - check all files of originalFiles array with files in dir + * - on conflict show dialog + * - skip all -> remember as single skip action for all conflicting files + * - replace all -> remember as single replace action for all conflicting files + * - choose -> show choose dialog + * - mark files to keep + * - when only existing -> remember as single skip action + * - when only new -> remember as single replace action + * - when both -> remember as single autorename action + * - start uploading selection + * @param {type} e + * @param {type} data + * @returns {Boolean} + */ add: function(e, data) { - - if(data.files[0].type === '' && data.files[0].size == 4096) - { + OC.Upload.logStatus('add', e, data); + var that = $(this); + + // we need to collect all data upload objects before starting the upload so we can check their existence + // and set individual conflict actions. unfortunately there is only one variable that we can use to identify + // the selection a data upload is part of, so we have to collect them in data.originalFiles + // turning singleFileUploads off is not an option because we want to gracefully handle server errors like + // already exists + + // create a container where we can store the data objects + if ( ! data.originalFiles.selection ) { + // initialize selection and remember number of files to upload + data.originalFiles.selection = { + uploads: [], + filesToUpload: data.originalFiles.length, + totalBytes: 0 + }; + } + var selection = data.originalFiles.selection; + + // add uploads + if ( selection.uploads.length < selection.filesToUpload ){ + // remember upload + selection.uploads.push(data); + } + + //examine file + var file = data.files[0]; + + if (file.type === '' && file.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 + data.errorThrown = t('files', 'Unable to upload {filename} as it is a directory or has 0 bytes', + {filename: file.name} + ); } - - var totalSize=0; - $.each(data.originalFiles, function(i,file){ - totalSize+=file.size; - }); - - if(totalSize>$('#max_upload').val()){ + + // add size + selection.totalBytes += file.size; + + //check max upload size + if (selection.totalBytes > $('#max_upload').val()) { data.textStatus = 'notenoughspace'; - data.errorThrown = t('files','Not enough space available'); - var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload'); + data.errorThrown = t('files', 'Not enough space available'); + } + + // end upload for whole selection on error + if (data.errorThrown) { + // trigger fileupload fail + var fu = that.data('blueimp-fileupload') || that.data('fileupload'); fu._trigger('fail', e, data); return false; //don't upload anything } - // start the actual file upload - var jqXHR = data.submit(); + // check existing files when all is collected + if ( selection.uploads.length >= selection.filesToUpload ) { + + //remove our selection hack: + delete data.originalFiles.selection; - // 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] = {}; - } - uploadingFiles[dirName][data.files[0].name] = jqXHR; - } else { - uploadingFiles[data.files[0].name] = jqXHR; - } + var callbacks = { + + onNoConflicts: function (selection) { + $.each(selection.uploads, function(i, upload) { + upload.submit(); + }); + }, + onSkipConflicts: function (selection) { + //TODO mark conflicting files as toskip + }, + onReplaceConflicts: function (selection) { + //TODO mark conflicting files as toreplace + }, + onChooseConflicts: function (selection) { + //TODO mark conflicting files as chosen + }, + onCancel: function (selection) { + $.each(selection.uploads, function(i, upload) { + upload.abort(); + }); + } + }; - //show cancel button - if($('html.lte9').length === 0 && data.dataType !== 'iframe') { - $('#uploadprogresswrapper input.stop').show(); + OC.Upload.checkExistingFiles(selection, callbacks); + } + + + + //TODO check filename already exists + /* + if ($('tr[data-file="'+data.files[0].name+'"][data-id]').length > 0) { + data.textStatus = 'alreadyexists'; + data.errorThrown = t('files', '{filename} already exists', + {filename: data.files[0].name} + ); + //TODO show "file already exists" dialog + var fu = that.data('blueimp-fileupload') || that.data('fileupload'); + fu._trigger('fail', e, data); + return false; + } + */ + + return true; // continue adding files }, /** * 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($('html.lte9').length > 0) { - return; - } - $('#uploadprogressbar').progressbar({value:0}); - $('#uploadprogressbar').fadeIn(); + OC.Upload.logStatus('start', e, null); }, fail: function(e, data) { + OC.Upload.logStatus('fail', e, data); if (typeof data.textStatus !== 'undefined' && data.textStatus !== 'success' ) { if (data.textStatus === 'abort') { $('#notification').text(t('files', 'Upload cancelled.')); @@ -72,18 +430,8 @@ $(document).ready(function() { $('#notification').fadeOut(); }, 5000); } - 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($('html.lte9').length > 0) { - return; - } - var progress = (data.loaded/data.total)*100; - $('#uploadprogressbar').progressbar('value',progress); + //var selection = OC.Upload.getSelection(data.originalFiles); + //OC.Upload.deleteSelectionUpload(selection, data.files[0].name); }, /** * called for every successful upload @@ -91,6 +439,7 @@ $(document).ready(function() { * @param data */ done:function(e, data) { + OC.Upload.logStatus('done', e, data); // handle different responses (json or body from iframe for ie) var response; if (typeof data.result === 'string') { @@ -100,27 +449,28 @@ $(document).ready(function() { response = data.result[0].body.innerText; } var result=$.parseJSON(response); + //var selection = OC.Upload.getSelection(data.originalFiles); - if(typeof result[0] !== 'undefined' && result[0].status === 'success') { - 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 { - delete uploadingFiles[filename]; - } - var file = result[0]; - } else { + if(typeof result[0] === 'undefined') { + data.textStatus = 'servererror'; + data.errorThrown = t('files', 'Could not get result from server.'); + var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload'); + fu._trigger('fail', e, data); + } else if (result[0].status === 'existserror') { + //show "file already exists" dialog + var original = result[0]; + var replacement = data.files[0]; + var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload'); + OC.dialogs.fileexists(data, original, replacement, OC.Upload, fu); + } else if (result[0].status !== 'success') { + delete data.jqXHR; data.textStatus = 'servererror'; data.errorThrown = t('files', result.data.message); var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload'); fu._trigger('fail', e, data); } + + }, /** * called after last upload @@ -128,78 +478,132 @@ $(document).ready(function() { * @param data */ stop: function(e, data) { - if(data.dataType !== 'iframe') { - $('#uploadprogresswrapper input.stop').hide(); - } - - //IE < 10 does not fire the necessary events for the progress bar. - if($('html.lte9').length > 0) { - return; - } - - $('#uploadprogressbar').progressbar('value',100); - $('#uploadprogressbar').fadeOut(); + OC.Upload.logStatus('stop', e, data); } }; - var file_upload_handler = function() { - $('#file_upload_start').fileupload(file_upload_param); - }; + if ( document.getElementById('data-upload-form') ) { + // initialize jquery fileupload (blueimp) + var fileupload = $('#file_upload_start').fileupload(file_upload_param); + window.file_upload_param = fileupload; + + if(supportAjaxUploadWithProgress()) { + + // add progress handlers + fileupload.on('fileuploadadd', function(e, data) { + OC.Upload.logStatus('progress handle fileuploadadd', e, data); + //show cancel button + //if(data.dataType !== 'iframe') { //FIXME when is iframe used? only for ie? + // $('#uploadprogresswrapper input.stop').show(); + //} + }); + // add progress handlers + fileupload.on('fileuploadstart', function(e, data) { + OC.Upload.logStatus('progress handle fileuploadstart', e, data); + $('#uploadprogresswrapper input.stop').show(); + $('#uploadprogressbar').progressbar({value:0}); + $('#uploadprogressbar').fadeIn(); + }); + fileupload.on('fileuploadprogress', function(e, data) { + OC.Upload.logStatus('progress handle fileuploadprogress', e, data); + //TODO progressbar in row + }); + fileupload.on('fileuploadprogressall', function(e, data) { + OC.Upload.logStatus('progress handle fileuploadprogressall', e, data); + var progress = (data.loaded / data.total) * 100; + $('#uploadprogressbar').progressbar('value', progress); + }); + fileupload.on('fileuploaddone', function(e, data) { + OC.Upload.logStatus('progress handle fileuploaddone', e, data); + //if user pressed cancel hide upload chrome + //if (! OC.Upload.isProcessing()) { + // $('#uploadprogresswrapper input.stop').fadeOut(); + // $('#uploadprogressbar').fadeOut(); + //} + }); + fileupload.on('fileuploadstop', function(e, data) { + OC.Upload.logStatus('progress handle fileuploadstop', e, data); + //if(OC.Upload.progressBytes()>=100) { //only hide controls when all selections have ended uploading + //OC.Upload.cancelUploads(); //cleanup - if ( document.getElementById('data-upload-form') ) { - $(file_upload_handler); + // if(data.dataType !== 'iframe') { + // $('#uploadprogresswrapper input.stop').hide(); + // } + + // $('#uploadprogressbar').progressbar('value', 100); + // $('#uploadprogressbar').fadeOut(); + //} + //if user pressed cancel hide upload chrome + //if (! OC.Upload.isProcessing()) { + // $('#uploadprogresswrapper input.stop').fadeOut(); + // $('#uploadprogressbar').fadeOut(); + //} + }); + fileupload.on('fileuploadfail', function(e, data) { + OC.Upload.logStatus('progress handle fileuploadfail', e, data); + //if user pressed cancel hide upload progress bar and cancel button + if (data.errorThrown === 'abort') { + $('#uploadprogresswrapper input.stop').fadeOut(); + $('#uploadprogressbar').fadeOut(); + } + }); + + } else { + console.log('skipping file progress because your browser is broken'); + } } $.assocArraySize = function(obj) { // http://stackoverflow.com/a/6700/11236 var size = 0, key; for (key in obj) { - if (obj.hasOwnProperty(key)) size++; + if (obj.hasOwnProperty(key)) { + size++; + } } return size; }; // warn user not to leave the page while upload is in progress - $(window).bind('beforeunload', function(e) { - if ($.assocArraySize(uploadingFiles) > 0) { - return t('files','File upload is in progress. Leaving the page now will cancel the upload.'); + $(window).on('beforeunload', function(e) { + if (OC.Upload.isProcessing()) { + return t('files', 'File upload is in progress. Leaving the page now will cancel the upload.'); } }); - //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'); + if(navigator.userAgent.search(/konqueror/i) === -1) { + $('#file_upload_start').attr('multiple', 'multiple'); } //if the breadcrumb is to long, start by replacing foldernames with '...' except for the current folder - var crumb=$('div.crumb').first(); - while($('div.controls').height()>40 && crumb.next('div.crumb').length>0){ + var crumb = $('div.crumb').first(); + while($('div.controls').height() > 40 && crumb.next('div.crumb').length > 0) { crumb.children('a').text('...'); - crumb=crumb.next('div.crumb'); + crumb = crumb.next('div.crumb'); } //if that isn't enough, start removing items from the breacrumb except for the current folder and it's parent - var crumb=$('div.crumb').first(); - var next=crumb.next('div.crumb'); - while($('div.controls').height()>40 && next.next('div.crumb').length>0){ + var crumb = $('div.crumb').first(); + var next = crumb.next('div.crumb'); + while($('div.controls').height() > 40 && next.next('div.crumb').length > 0) { crumb.remove(); - crumb=next; - next=crumb.next('div.crumb'); + crumb = next; + next = crumb.next('div.crumb'); } //still not enough, start shorting down the current folder name - var crumb=$('div.crumb>a').last(); - while($('div.controls').height()>40 && crumb.text().length>6){ - var text=crumb.text() - text=text.substr(0,text.length-6)+'...'; + var crumb = $('div.crumb>a').last(); + while($('div.controls').height() > 40 && crumb.text().length > 6) { + var text = crumb.text(); + text = text.substr(0, text.length-6)+'...'; crumb.text(text); } - $(document).click(function(){ + $(document).click(function() { $('#new>ul').hide(); $('#new').removeClass('active'); - $('#new li').each(function(i,element){ - if($(element).children('p').length==0){ + $('#new li').each(function(i, element) { + if($(element).children('p').length === 0) { $(element).children('form').remove(); - $(element).append('<p>'+$(element).data('text')+'</p>'); + $(element).append('<p>' + $(element).data('text') + '</p>'); } }); }); @@ -215,57 +619,57 @@ $(document).ready(function() { return; } - $('#new li').each(function(i,element){ - if($(element).children('p').length==0){ + $('#new li').each(function(i, element) { + if($(element).children('p').length === 0) { $(element).children('form').remove(); - $(element).append('<p>'+$(element).data('text')+'</p>'); + $(element).append('<p>' + $(element).data('text') + '</p>'); } }); - var type=$(this).data('type'); - var text=$(this).children('p').text(); - $(this).data('text',text); + var type = $(this).data('type'); + var text = $(this).children('p').text(); + $(this).data('text', text); $(this).children('p').remove(); - var form=$('<form></form>'); - var input=$('<input type="text">'); + var form = $('<form></form>'); + var input = $('<input>'); form.append(input); $(this).append(form); input.focus(); - form.submit(function(event){ + form.submit(function(event) { event.stopPropagation(); event.preventDefault(); var newname=input.val(); - if(type == 'web' && newname.length == 0) { + if(type === 'web' && newname.length === 0) { OC.Notification.show(t('files', 'URL cannot be empty.')); return false; - } else if (type != 'web' && !Files.isFileNameValid(newname)) { + } else if (type !== 'web' && !Files.isFileNameValid(newname)) { return false; - } else if( type == 'folder' && $('#dir').val() == '/' && newname == 'Shared') { - OC.Notification.show(t('files','Invalid folder name. Usage of \'Shared\' is reserved by ownCloud')); + } else if( type === 'folder' && $('#dir').val() === '/' && newname === 'Shared') { + OC.Notification.show(t('files', 'Invalid folder name. Usage of \'Shared\' is reserved by ownCloud')); return false; } if (FileList.lastAction) { FileList.lastAction(); } var name = getUniqueName(newname); - if (newname != name) { + if (newname !== name) { FileList.checkName(name, newname, true); var hidden = true; } else { var hidden = false; } - switch(type){ + switch(type) { case 'file': $.post( - OC.filePath('files','ajax','newfile.php'), - {dir:$('#dir').val(),filename:name}, - function(result){ - if (result.status == 'success') { - var date=new Date(); - FileList.addFile(name,0,date,false,hidden); - var tr=$('tr').filterAttr('data-file',name); + OC.filePath('files', 'ajax', 'newfile.php'), + {dir:$('#dir').val(), filename:name}, + function(result) { + if (result.status === 'success') { + var date = new Date(); + FileList.addFile(name, 0, date, false, hidden); + var tr = $('tr').filterAttr('data-file', name); tr.attr('data-size',result.data.size); - tr.attr('data-mime',result.data.mime); + tr.attr('data-mime', result.data.mime); tr.attr('data-id', result.data.id); tr.find('.filesize').text(humanFileSize(result.data.size)); var path = getPathForPreview(name); @@ -280,13 +684,13 @@ $(document).ready(function() { break; case 'folder': $.post( - OC.filePath('files','ajax','newfolder.php'), - {dir:$('#dir').val(),foldername:name}, - function(result){ - if (result.status == 'success') { - var date=new Date(); - FileList.addDir(name,0,date,hidden); - var tr=$('tr').filterAttr('data-file',name); + OC.filePath('files', 'ajax', 'newfolder.php'), + {dir:$('#dir').val(), foldername:name}, + function(result) { + if (result.status === 'success') { + var date = new Date(); + FileList.addDir(name, 0, date, hidden); + var tr = $('tr').filterAttr('data-file', name); tr.attr('data-id', result.data.id); } else { OC.dialogs.alert(result.data.message, t('core', 'Error')); @@ -295,58 +699,61 @@ $(document).ready(function() { ); break; case 'web': - if(name.substr(0,8)!='https://' && name.substr(0,7)!='http://'){ - name='http://'+name; + if (name.substr(0, 8) !== 'https://' && name.substr(0, 7) !== 'http://') { + name = 'http://' + name; } - var localName=name; - if(localName.substr(localName.length-1,1)=='/'){//strip / - localName=localName.substr(0,localName.length-1) + var localName = name; + if(localName.substr(localName.length-1, 1) === '/') { //strip / + localName = localName.substr(0, localName.length-1); } - if(localName.indexOf('/')){//use last part of url - localName=localName.split('/').pop(); + if (localName.indexOf('/')) { //use last part of url + localName = localName.split('/').pop(); } else { //or the domain - localName=(localName.match(/:\/\/(.[^\/]+)/)[1]).replace('www.',''); + localName = (localName.match(/:\/\/(.[^\/]+)/)[1]).replace('www.', ''); } localName = getUniqueName(localName); + //IE < 10 does not fire the necessary events for the progress bar. if($('html.lte9').length === 0) { $('#uploadprogressbar').progressbar({value:0}); $('#uploadprogressbar').fadeIn(); } - - var eventSource=new OC.EventSource(OC.filePath('files','ajax','newfile.php'),{dir:$('#dir').val(),source:name,filename:localName}); + 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($('html.lte9').length === 0) { - $('#uploadprogressbar').progressbar('value',progress); + $('#uploadprogressbar').progressbar('value', progress); } }); - eventSource.listen('success',function(data){ - var mime=data.mime; - var size=data.size; - var id=data.id; + eventSource.listen('success', function(data) { + var mime = data.mime; + var size = data.size; + var id = data.id; $('#uploadprogressbar').fadeOut(); - var date=new Date(); - FileList.addFile(localName,size,date,false,hidden); - var tr=$('tr').filterAttr('data-file',localName); - tr.data('mime',mime).data('id',id); + var date = new Date(); + FileList.addFile(localName, size, date, false, hidden); + var tr = $('tr').filterAttr('data-file', localName); + tr.data('mime', mime).data('id', id); tr.attr('data-id', id); var path = $('#dir').val()+'/'+localName; lazyLoadPreview(path, mime, function(previewpath){ tr.find('td.filename').attr('style','background-image:url('+previewpath+')'); }); }); - eventSource.listen('error',function(error){ + eventSource.listen('error', function(error) { $('#uploadprogressbar').fadeOut(); alert(error); }); break; } - var li=form.parent(); + var li = form.parent(); form.remove(); - li.append('<p>'+li.data('text')+'</p>'); + li.append('<p>' + li.data('text') + '</p>'); $('#new>a').click(); }); + }); - window.file_upload_param = file_upload_param; }); diff --git a/apps/files/js/fileactions.js b/apps/files/js/fileactions.js index 097fe521aa6..703e543bf4b 100644 --- a/apps/files/js/fileactions.js +++ b/apps/files/js/fileactions.js @@ -172,7 +172,7 @@ $(document).ready(function () { FileActions.register('all', 'Delete', OC.PERMISSION_DELETE, function () { return OC.imagePath('core', 'actions/delete'); }, function (filename) { - if (Files.cancelUpload(filename)) { + if (OC.Upload.cancelUpload($('#dir').val(), filename)) { if (filename.substr) { filename = [filename]; } diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 29be5e0d362..4f20d1940aa 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -24,7 +24,7 @@ var FileList={ "href": linktarget }); //split extension from filename for non dirs - if (type != 'dir' && name.indexOf('.')!=-1) { + if (type !== 'dir' && name.indexOf('.')!==-1) { basename=name.substr(0,name.lastIndexOf('.')); extension=name.substr(name.lastIndexOf('.')); } else { @@ -37,7 +37,7 @@ var FileList={ name_span.append($('<span></span>').addClass('extension').text(extension)); } //dirs can show the number of uploaded files - if (type == 'dir') { + if (type === 'dir') { link_elem.append($('<span></span>').attr({ 'class': 'uploadtext', 'currentUploads': 0 @@ -47,7 +47,7 @@ var FileList={ tr.append(td); //size column - if(size!=t('files', 'Pending')){ + if(size!==t('files', 'Pending')){ simpleSize = humanFileSize(size); }else{ simpleSize=t('files', 'Pending'); @@ -136,7 +136,7 @@ var FileList={ }, refresh:function(data) { var result = jQuery.parseJSON(data.responseText); - if(typeof(result.data.breadcrumb) != 'undefined'){ + if(typeof(result.data.breadcrumb) !== 'undefined'){ updateBreadcrumb(result.data.breadcrumb); } FileList.update(result.data.files); @@ -146,7 +146,7 @@ var FileList={ $('tr').filterAttr('data-file',name).find('td.filename').draggable('destroy'); $('tr').filterAttr('data-file',name).remove(); FileList.updateFileSummary(); - if($('tr[data-file]').length==0){ + if($('tr[data-file]').length===0){ $('#emptycontent').show(); } }, @@ -165,14 +165,14 @@ var FileList={ } } if(fileElements.length){ - if(pos==-1){ + if(pos===-1){ $(fileElements[0]).before(element); }else{ $(fileElements[pos]).after(element); } - }else if(type=='dir' && $('tr[data-file]').length>0){ + }else if(type==='dir' && $('tr[data-file]').length>0){ $('tr[data-file]').first().before(element); - } else if(type=='file' && $('tr[data-file]').length>0) { + } else if(type==='file' && $('tr[data-file]').length>0) { $('tr[data-file]').last().before(element); }else{ $('#fileList').append(element); @@ -185,7 +185,7 @@ var FileList={ tr.data('loading',false); mime=tr.data('mime'); tr.attr('data-mime',mime); - if (id != null) { + if (id) { tr.attr('data-id', id); } var path = getPathForPreview(name); @@ -221,7 +221,7 @@ var FileList={ var newname=input.val(); if (!Files.isFileNameValid(newname)) { return false; - } else if (newname != name) { + } else if (newname !== name) { if (FileList.checkName(name, newname, false)) { newname = name; } else { @@ -269,14 +269,14 @@ var FileList={ tr.attr('data-file', newname); var path = td.children('a.name').attr('href'); td.children('a.name').attr('href', path.replace(encodeURIComponent(name), encodeURIComponent(newname))); - if (newname.indexOf('.') > 0 && tr.data('type') != 'dir') { + if (newname.indexOf('.') > 0 && tr.data('type') !== 'dir') { var basename=newname.substr(0,newname.lastIndexOf('.')); } else { var basename=newname; } td.find('a.name span.nametext').text(basename); - if (newname.indexOf('.') > 0 && tr.data('type') != 'dir') { - if (td.find('a.name span.extension').length == 0 ) { + if (newname.indexOf('.') > 0 && tr.data('type') !== 'dir') { + if (td.find('a.name span.extension').length === 0 ) { td.find('a.name span.nametext').append('<span class="extension"></span>'); } td.find('a.name span.extension').text(newname.substr(newname.lastIndexOf('.'))); @@ -286,7 +286,7 @@ var FileList={ return false; }); input.keyup(function(event){ - if (event.keyCode == 27) { + if (event.keyCode === 27) { tr.data('renaming',false); form.remove(); td.children('a.name').show(); @@ -312,7 +312,7 @@ var FileList={ html.attr('data-oldName', oldName); html.attr('data-newName', newName); html.attr('data-isNewFile', isNewFile); - OC.Notification.showHtml(html); + OC.Notification.showHtml(html); return true; } else { return false; @@ -351,13 +351,13 @@ var FileList={ FileList.finishReplace(); }; if (!isNewFile) { - OC.Notification.showHtml(t('files', 'replaced {new_name} with {old_name}', {new_name: newName}, {old_name: oldName})+'<span class="undo">'+t('files', 'undo')+'</span>'); + OC.Notification.showHtml(t('files', 'replaced {new_name} with {old_name}', {new_name: newName}, {old_name: oldName})+'<span class="undo">'+t('files', 'undo')+'</span>'); } }, finishReplace:function() { if (!FileList.replaceCanceled && FileList.replaceOldName && FileList.replaceNewName) { $.ajax({url: OC.filePath('files', 'ajax', 'rename.php'), async: false, data: { dir: $('#dir').val(), newname: FileList.replaceNewName, file: FileList.replaceOldName }, success: function(result) { - if (result && result.status == 'success') { + if (result && result.status === 'success') { $('tr').filterAttr('data-replace', 'true').removeAttr('data-replace'); } else { OC.dialogs.alert(result.data.message, 'Error moving file'); @@ -386,7 +386,7 @@ var FileList={ $.post(OC.filePath('files', 'ajax', 'delete.php'), {dir:$('#dir').val(),files:fileNames}, function(result){ - if (result.status == 'success') { + if (result.status === 'success') { $.each(files,function(index,file){ var files = $('tr').filterAttr('data-file',file); files.remove(); @@ -515,150 +515,248 @@ $(document).ready(function(){ // handle upload events var file_upload_start = $('#file_upload_start'); + file_upload_start.on('fileuploaddrop', function(e, data) { - // only handle drop to dir if fileList exists - if ($('#fileList').length > 0) { - var dropTarget = $(e.originalEvent.target).closest('tr'); - if(dropTarget && dropTarget.data('type') === 'dir') { // drag&drop upload to folder - var dirName = dropTarget.data('file'); - // update folder in form - data.formData = function(form) { - var formArray = form.serializeArray(); - // array index 0 contains the max files size - // array index 1 contains the request token - // array index 2 contains the directory - var parentDir = formArray[2]['value']; - if (parentDir === '/') { - formArray[2]['value'] += dirName; - } else { - formArray[2]['value'] += '/'+dirName; - } - return formArray; + OC.Upload.logStatus('filelist handle fileuploaddrop', e, data); + + var dropTarget = $(e.originalEvent.target).closest('tr'); + if(dropTarget && dropTarget.data('type') === 'dir') { // drag&drop upload to folder + + // lookup selection for dir + var selection = OC.Upload.getSelection(data.files); + + // remember drop target + selection.dropTarget = dropTarget; + + selection.dir = dropTarget.data('file'); + if (selection.dir !== '/') { + if ($('#dir').val() === '/') { + selection.dir = '/' + selection.dir; + } else { + selection.dir = $('#dir').val() + '/' + selection.dir; } } - } + + // update folder in form + data.formData = function(form) { + var formArray = form.serializeArray(); + // array index 0 contains the max files size + // array index 1 contains the request token + // array index 2 contains the directory + var parentDir = formArray[2]['value']; + if (parentDir === '/') { + formArray[2]['value'] += selection.dir; + } else { + formArray[2]['value'] += '/' + selection.dir; + } + + return formArray; + }; + } + }); file_upload_start.on('fileuploadadd', function(e, data) { - // only add to fileList if it exists - if ($('#fileList').length > 0) { - - if(FileList.deleteFiles && FileList.deleteFiles.indexOf(data.files[0].name)!=-1){//finish delete if we are uploading a deleted file - FileList.finishDelete(null, true); //delete file before continuing + OC.Upload.logStatus('filelist handle fileuploadadd', e, data); + + // lookup selection for dir + var selection = OC.Upload.getSelection(data.originalFiles); + + if(FileList.deleteFiles && FileList.deleteFiles.indexOf(data.files[0].name)!==-1){//finish delete if we are uploading a deleted file + FileList.finishDelete(null, true); //delete file before continuing + } + + // add ui visualization to existing folder + if(selection.dropTarget && selection.dropTarget.data('type') === 'dir') { + // add to existing folder + var dirName = selection.dropTarget.data('file'); + + // set dir context + data.context = $('tr').filterAttr('data-type', 'dir').filterAttr('data-file', dirName); + + // update upload counter ui + var uploadtext = data.context.find('.uploadtext'); + var currentUploads = parseInt(uploadtext.attr('currentUploads')); + currentUploads += 1; + uploadtext.attr('currentUploads', currentUploads); + + var translatedText = n('files', 'Uploading %n file', 'Uploading %n files', currentUploads); + if(currentUploads === 1) { + var img = OC.imagePath('core', 'loading.gif'); + data.context.find('td.filename').attr('style','background-image:url('+img+')'); + uploadtext.text(translatedText); + uploadtext.show(); + } else { + uploadtext.text(translatedText); } + } + + }); + file_upload_start.on('fileuploadstart', function(e, data) { + OC.Upload.logStatus('filelist handle fileuploadstart', e, data); + }); + file_upload_start.on('fileuploaddone', function(e, data) { + OC.Upload.logStatus('filelist handle fileuploaddone', e, data); + + 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); - // add ui visualization to existing folder or as new stand-alone file? - var dropTarget = $(e.originalEvent.target).closest('tr'); - if(dropTarget && dropTarget.data('type') === 'dir') { - // add to existing folder - var dirName = dropTarget.data('file'); + if(typeof result[0] !== 'undefined' && result[0].status === 'success') { + var file = result[0]; - // set dir context - data.context = $('tr').filterAttr('data-type', 'dir').filterAttr('data-file', dirName); + if (data.context && data.context.data('type') === 'dir') { // update upload counter ui var uploadtext = data.context.find('.uploadtext'); var currentUploads = parseInt(uploadtext.attr('currentUploads')); - currentUploads += 1; + currentUploads -= 1; uploadtext.attr('currentUploads', currentUploads); var translatedText = n('files', 'Uploading %n file', 'Uploading %n files', currentUploads); - if(currentUploads === 1) { - var img = OC.imagePath('core', 'loading.gif'); + if(currentUploads === 0) { + var img = OC.imagePath('core', 'filetypes/folder.png'); data.context.find('td.filename').attr('style','background-image:url('+img+')'); uploadtext.text(translatedText); uploadtext.show(); } else { uploadtext.text(translatedText); } + + // update folder size + var size = parseInt(data.context.data('size')); + size += parseInt(file.size); + data.context.attr('data-size', size); + data.context.find('td.filesize').text(humanFileSize(size)); + } else { + // add as stand-alone row to filelist - var uniqueName = getUniqueName(data.files[0].name); - var size=t('files','Pending'); - if(data.files[0].size>=0){ + var size=t('files', 'Pending'); + if (data.files[0].size>=0){ size=data.files[0].size; } var date=new Date(); var param = {}; if ($('#publicUploadRequestToken').length) { - param.download_url = document.location.href + '&download&path=/' + $('#dir').val() + '/' + uniqueName; + param.download_url = document.location.href + '&download&path=/' + $('#dir').val() + '/' + file.name; } + //should the file exist in the list remove it + FileList.remove(file.name); + // create new file context - data.context = FileList.addFile(uniqueName,size,date,true,false,param); + data.context = FileList.addFile(file.name, file.size, date, false, false, param); + // update file data + data.context.attr('data-mime',file.mime).attr('data-id',file.id); + + var path = getPathForPreview(file.name); + lazyLoadPreview(path, file.mime, function(previewpath){ + data.context.find('td.filename').attr('style','background-image:url('+previewpath+')'); + }); } } + + //if user pressed cancel hide upload chrome + if (! OC.Upload.isProcessing()) { + //cleanup uploading to a dir + var uploadtext = $('tr .uploadtext'); + var img = OC.imagePath('core', 'filetypes/folder.png'); + uploadtext.parents('td.filename').attr('style','background-image:url('+img+')'); + uploadtext.fadeOut(); + uploadtext.attr('currentUploads', 0); + } }); - file_upload_start.on('fileuploaddone', function(e, data) { - // only update the fileList if it exists - if ($('#fileList').length > 0) { - var response; - if (typeof data.result === 'string') { - response = data.result; + + file_upload_start.on('fileuploadalways', function(e, data) { + OC.Upload.logStatus('filelist handle fileuploadalways', e, data); + }); + file_upload_start.on('fileuploadsend', function(e, data) { + OC.Upload.logStatus('filelist handle fileuploadsend', e, data); + + // TODOD add vis + //data.context.element = + }); + file_upload_start.on('fileuploadprogress', function(e, data) { + OC.Upload.logStatus('filelist handle fileuploadprogress', e, data); + }); + file_upload_start.on('fileuploadprogressall', function(e, data) { + OC.Upload.logStatus('filelist handle fileuploadprogressall', e, data); + }); + file_upload_start.on('fileuploadstop', function(e, data) { + OC.Upload.logStatus('filelist handle fileuploadstop', e, data); + + //if user pressed cancel hide upload chrome + if (! OC.Upload.isProcessing()) { + //cleanup uploading to a dir + var uploadtext = $('tr .uploadtext'); + var img = OC.imagePath('core', 'filetypes/folder.png'); + uploadtext.parents('td.filename').attr('style','background-image:url('+img+')'); + uploadtext.fadeOut(); + uploadtext.attr('currentUploads', 0); + } + }); + file_upload_start.on('fileuploadfail', function(e, data) { + OC.Upload.logStatus('filelist handle fileuploadfail', e, data); + + //if user pressed cancel hide upload chrome + if (data.errorThrown === 'abort') { + //cleanup uploading to a dir + var uploadtext = $('tr .uploadtext'); + var img = OC.imagePath('core', 'filetypes/folder.png'); + uploadtext.parents('td.filename').attr('style','background-image:url('+img+')'); + uploadtext.fadeOut(); + uploadtext.attr('currentUploads', 0); + } + }); + /* + file_upload_start.on('fileuploadfail', function(e, data) { + console.log('fileuploadfail'+((data.files&&data.files.length>0)?' '+data.files[0].name:'')); + + // if we are uploading to a subdirectory + if (data.context && data.context.data('type') === 'dir') { + + // update upload counter ui + var uploadtext = data.context.find('.uploadtext'); + var currentUploads = parseInt(uploadtext.attr('currentUploads')); + currentUploads -= 1; + uploadtext.attr('currentUploads', currentUploads); + if(currentUploads === 0) { + var img = OC.imagePath('core', 'filetypes/folder.png'); + data.context.find('td.filename').attr('style','background-image:url('+img+')'); + uploadtext.text(''); + uploadtext.hide(); } else { - // fetch response from iframe - response = data.result[0].body.innerText; + uploadtext.text(currentUploads + ' ' + t('files', 'files uploading')); } - var result=$.parseJSON(response); - - if(typeof result[0] !== 'undefined' && result[0].status === 'success') { - var file = result[0]; - - if (data.context.data('type') === 'file') { - // update file data - data.context.attr('data-mime',file.mime).attr('data-id',file.id); - var size = data.context.data('size'); - if(size!=file.size){ - data.context.attr('data-size', file.size); - data.context.find('td.filesize').text(humanFileSize(file.size)); - } - if (FileList.loadingDone) { - FileList.loadingDone(file.name, file.id); - } - } else { - // update upload counter ui - var uploadtext = data.context.find('.uploadtext'); - var currentUploads = parseInt(uploadtext.attr('currentUploads')); - currentUploads -= 1; - uploadtext.attr('currentUploads', currentUploads); - if(currentUploads === 0) { - var img = OC.imagePath('core', 'filetypes/folder.png'); - data.context.find('td.filename').attr('style','background-image:url('+img+')'); - uploadtext.text(''); - uploadtext.hide(); - } else { - uploadtext.text(currentUploads + ' ' + t('files', 'files uploading')); - } - - // update folder size - var size = parseInt(data.context.data('size')); - size += parseInt(file.size) ; - data.context.attr('data-size', size); - data.context.find('td.filesize').text(humanFileSize(size)); - } - } } - }); - file_upload_start.on('fileuploadfail', function(e, data) { - // only update the fileList if it exists + // cleanup files, error notification has been shown by fileupload code var tr = data.context; if (typeof tr === 'undefined') { tr = $('tr').filterAttr('data-file', data.files[0].name); } if (tr.attr('data-type') === 'dir') { + //cleanup uploading to a dir var uploadtext = tr.find('.uploadtext'); var img = OC.imagePath('core', 'filetypes/folder.png'); tr.find('td.filename').attr('style','background-image:url('+img+')'); uploadtext.text(''); uploadtext.hide(); //TODO really hide already + } else { + //TODO add row when sending file //remove file tr.fadeOut(); tr.remove(); } }); - +*/ $('#notification').hide(); $('#notification').on('click', '.undo', function(){ if (FileList.deleteFiles) { @@ -683,16 +781,16 @@ $(document).ready(function(){ FileList.replaceIsNewFile = null; } FileList.lastAction = null; - OC.Notification.hide(); + OC.Notification.hide(); }); $('#notification:first-child').on('click', '.replace', function() { - OC.Notification.hide(function() { - FileList.replace($('#notification > span').attr('data-oldName'), $('#notification > span').attr('data-newName'), $('#notification > span').attr('data-isNewFile')); - }); + OC.Notification.hide(function() { + FileList.replace($('#notification > span').attr('data-oldName'), $('#notification > span').attr('data-newName'), $('#notification > span').attr('data-isNewFile')); + }); }); $('#notification:first-child').on('click', '.suggest', function() { $('tr').filterAttr('data-file', $('#notification > span').attr('data-oldName')).show(); - OC.Notification.hide(); + OC.Notification.hide(); }); $('#notification:first-child').on('click', '.cancel', function() { if ($('#notification > span').attr('data-isNewFile')) { diff --git a/apps/files/js/files.js b/apps/files/js/files.js index d729077ea72..4a6c9c78900 100644 --- a/apps/files/js/files.js +++ b/apps/files/js/files.js @@ -1,33 +1,6 @@ -var uploadingFiles = {}; Files={ - cancelUpload:function(filename) { - if(uploadingFiles[filename]) { - uploadingFiles[filename].abort(); - delete uploadingFiles[filename]; - return true; - } - return false; - }, - cancelUploads:function() { - $.each(uploadingFiles,function(index,file) { - if(typeof file['abort'] === 'function') { - file.abort(); - var filename = $('tr').filterAttr('data-file',index); - filename.hide(); - filename.find('input[type="checkbox"]').removeAttr('checked'); - filename.removeClass('selected'); - } else { - $.each(file,function(i,f) { - f.abort(); - delete file[i]; - }); - } - delete uploadingFiles[index]; - }); - procesSelection(); - }, updateMaxUploadFilesize:function(response) { - if(response == undefined) { + if(response === undefined) { return; } if(response.data !== undefined && response.data.uploadMaxFilesize !== undefined) { @@ -36,7 +9,7 @@ Files={ $('#usedSpacePercent').val(response.data.usedSpacePercent); Files.displayStorageWarnings(); } - if(response[0] == undefined) { + if(response[0] === undefined) { return; } if(response[0].uploadMaxFilesize !== undefined) { @@ -52,7 +25,7 @@ Files={ OC.Notification.show(t('files', '\'.\' is an invalid file name.')); return false; } - if (name.length == 0) { + if (name.length === 0) { OC.Notification.show(t('files', 'File name cannot be empty.')); return false; } @@ -60,7 +33,7 @@ Files={ // check for invalid characters var invalid_characters = ['\\', '/', '<', '>', ':', '"', '|', '?', '*']; for (var i = 0; i < invalid_characters.length; i++) { - if (name.indexOf(invalid_characters[i]) != -1) { + if (name.indexOf(invalid_characters[i]) !== -1) { OC.Notification.show(t('files', "Invalid name, '\\', '/', '<', '>', ':', '\"', '|', '?' and '*' are not allowed.")); return false; } @@ -131,7 +104,8 @@ $(document).ready(function() { // Trigger cancelling of file upload $('#uploadprogresswrapper .stop').on('click', function() { - Files.cancelUploads(); + OC.Upload.cancelUploads(); + procesSelection(); }); // Show trash bin @@ -153,7 +127,7 @@ $(document).ready(function() { var rows = $(this).parent().parent().parent().children('tr'); for (var i = start; i < end; i++) { $(rows).each(function(index) { - if (index == i) { + if (index === i) { var checkbox = $(this).children().children('input:checkbox'); $(checkbox).attr('checked', 'checked'); $(checkbox).parent().parent().addClass('selected'); @@ -171,7 +145,7 @@ $(document).ready(function() { $(checkbox).attr('checked', 'checked'); $(checkbox).parent().parent().toggleClass('selected'); var selectedCount=$('td.filename input:checkbox:checked').length; - if (selectedCount == $('td.filename input:checkbox').length) { + if (selectedCount === $('td.filename input:checkbox').length) { $('#select_all').attr('checked', 'checked'); } } @@ -218,7 +192,7 @@ $(document).ready(function() { var rows = $(this).parent().parent().parent().children('tr'); for (var i = start; i < end; i++) { $(rows).each(function(index) { - if (index == i) { + if (index === i) { var checkbox = $(this).children().children('input:checkbox'); $(checkbox).attr('checked', 'checked'); $(checkbox).parent().parent().addClass('selected'); @@ -231,7 +205,7 @@ $(document).ready(function() { if(!$(this).attr('checked')){ $('#select_all').attr('checked',false); }else{ - if(selectedCount==$('td.filename input:checkbox').length){ + if(selectedCount === $('td.filename input:checkbox').length){ $('#select_all').attr('checked',true); } } @@ -288,9 +262,9 @@ $(document).ready(function() { function resizeBreadcrumbs(firstRun) { var width = $(this).width(); - if (width != lastWidth) { + if (width !== lastWidth) { if ((width < lastWidth || firstRun) && width < breadcrumbsWidth) { - if (hiddenBreadcrumbs == 0) { + if (hiddenBreadcrumbs === 0) { breadcrumbsWidth -= $(breadcrumbs[1]).get(0).offsetWidth; $(breadcrumbs[1]).find('a').hide(); $(breadcrumbs[1]).append('<span>...</span>'); @@ -302,12 +276,12 @@ $(document).ready(function() { breadcrumbsWidth -= $(breadcrumbs[i]).get(0).offsetWidth; $(breadcrumbs[i]).hide(); hiddenBreadcrumbs = i; - i++ + i++; } } else if (width > lastWidth && hiddenBreadcrumbs > 0) { var i = hiddenBreadcrumbs; while (width > breadcrumbsWidth && i > 0) { - if (hiddenBreadcrumbs == 1) { + if (hiddenBreadcrumbs === 1) { breadcrumbsWidth -= $(breadcrumbs[1]).get(0).offsetWidth; $(breadcrumbs[1]).find('span').remove(); $(breadcrumbs[1]).find('a').show(); @@ -408,7 +382,7 @@ scanFiles.scanning=false; function boolOperationFinished(data, callback) { result = jQuery.parseJSON(data.responseText); Files.updateMaxUploadFilesize(result); - if(result.status == 'success'){ + if(result.status === 'success'){ callback.call(); } else { alert(result.data.message); @@ -462,7 +436,7 @@ var createDragShadow = function(event){ }); return dragshadow; -} +}; //options for file drag/drop var dragOptions={ @@ -472,7 +446,7 @@ var dragOptions={ stop: function(event, ui) { $('#fileList tr td.filename').addClass('ui-draggable'); } -} +}; // sane browsers support using the distance option if ( $('html.ie').length === 0) { dragOptions['distance'] = 20; @@ -515,7 +489,7 @@ var folderDropOptions={ }); }, tolerance: 'pointer' -} +}; var crumbDropOptions={ drop: function( event, ui ) { diff --git a/apps/files/js/jquery.fileupload.js b/apps/files/js/jquery.fileupload.js index a89e9dc2c44..f9f6cc3a382 100644 --- a/apps/files/js/jquery.fileupload.js +++ b/apps/files/js/jquery.fileupload.js @@ -1,5 +1,5 @@ /* - * jQuery File Upload Plugin 5.9 + * jQuery File Upload Plugin 5.32.2 * https://github.com/blueimp/jQuery-File-Upload * * Copyright 2010, Sebastian Tschan @@ -10,7 +10,7 @@ */ /*jslint nomen: true, unparam: true, regexp: true */ -/*global define, window, document, Blob, FormData, location */ +/*global define, window, document, location, File, Blob, FormData */ (function (factory) { 'use strict'; @@ -27,12 +27,28 @@ }(function ($) { 'use strict'; + // Detect file input support, based on + // http://viljamis.com/blog/2012/file-upload-support-on-mobile/ + $.support.fileInput = !(new RegExp( + // Handle devices which give false positives for the feature detection: + '(Android (1\\.[0156]|2\\.[01]))' + + '|(Windows Phone (OS 7|8\\.0))|(XBLWP)|(ZuneWP)|(WPDesktop)' + + '|(w(eb)?OSBrowser)|(webOS)' + + '|(Kindle/(1\\.0|2\\.[05]|3\\.0))' + ).test(window.navigator.userAgent) || + // Feature detection for all other devices: + $('<input type="file">').prop('disabled')); + // The FileReader API is not actually used, but works as feature detection, // as e.g. Safari supports XHR file uploads via the FormData API, // but not non-multipart XHR file uploads: $.support.xhrFileUpload = !!(window.XMLHttpRequestUpload && window.FileReader); $.support.xhrFormDataFileUpload = !!window.FormData; + // Detect support for Blob slicing (required for chunked uploads): + $.support.blobSlice = window.Blob && (Blob.prototype.slice || + Blob.prototype.webkitSlice || Blob.prototype.mozSlice); + // The fileupload widget listens for change events on file input fields defined // via fileInput setting and paste or drop events of the given dropZone. // In addition to the default jQuery Widget methods, the fileupload widget @@ -44,17 +60,16 @@ $.widget('blueimp.fileupload', { options: { - // The namespace used for event handler binding on the dropZone and - // fileInput collections. - // If not set, the name of the widget ("fileupload") is used. - namespace: undefined, - // The drop target collection, by the default the complete document. - // Set to null or an empty collection to disable drag & drop support: + // The drop target element(s), by the default the complete document. + // Set to null to disable drag & drop support: dropZone: $(document), - // The file input field collection, that is listened for change events. + // The paste target element(s), by the default the complete document. + // Set to null to disable paste support: + pasteZone: $(document), + // The file input field(s), that are listened to for change events. // If undefined, it is set to the file input fields inside // of the widget element on plugin initialization. - // Set to null or an empty collection to disable the change listener. + // Set to null to disable the change listener. fileInput: undefined, // By default, the file input field is replaced with a clone after // each input field change event. This is required for iframe transport @@ -63,7 +78,8 @@ replaceFileInput: true, // The parameter name for the file form data (the request argument name). // If undefined or empty, the name property of the file input field is - // used, or "files[]" if the file input name property is also empty: + // used, or "files[]" if the file input name property is also empty, + // can be a string or an array of strings: paramName: undefined, // By default, each file of a selection is uploaded using an individual // request for XHR type uploads. Set to false to upload file @@ -108,6 +124,29 @@ // global progress calculation. Set the following option to false to // prevent recalculating the global progress data: recalculateProgress: true, + // Interval in milliseconds to calculate and trigger progress events: + progressInterval: 100, + // Interval in milliseconds to calculate progress bitrate: + bitrateInterval: 500, + // By default, uploads are started automatically when adding files: + autoUpload: true, + + // Error and info messages: + messages: { + uploadedBytes: 'Uploaded bytes exceed file size' + }, + + // Translation function, gets the message key to be translated + // and an object with context specific data as arguments: + i18n: function (message, context) { + message = this.messages[message] || message.toString(); + if (context) { + $.each(context, function (key, value) { + message = message.replace('{' + key + '}', value); + }); + } + return message; + }, // Additional form data to be sent along with the file uploads can be set // using this option, which accepts an array of objects with name and @@ -121,48 +160,81 @@ // The add callback is invoked as soon as files are added to the fileupload // widget (via file input selection, drag & drop, paste or add API call). // If the singleFileUploads option is enabled, this callback will be - // called once for each file in the selection for XHR file uplaods, else + // called once for each file in the selection for XHR file uploads, else // once for each file selection. + // // The upload starts when the submit method is invoked on the data parameter. // The data object contains a files property holding the added files - // and allows to override plugin options as well as define ajax settings. + // and allows you to override plugin options as well as define ajax settings. + // // Listeners for this callback can also be bound the following way: // .bind('fileuploadadd', func); + // // data.submit() returns a Promise object and allows to attach additional // handlers using jQuery's Deferred callbacks: // data.submit().done(func).fail(func).always(func); add: function (e, data) { - data.submit(); + if (data.autoUpload || (data.autoUpload !== false && + $(this).fileupload('option', 'autoUpload'))) { + data.process().done(function () { + data.submit(); + }); + } }, // Other callbacks: + // Callback for the submit event of each file upload: // submit: function (e, data) {}, // .bind('fileuploadsubmit', func); + // Callback for the start of each file upload request: // send: function (e, data) {}, // .bind('fileuploadsend', func); + // Callback for successful uploads: // done: function (e, data) {}, // .bind('fileuploaddone', func); + // Callback for failed (abort or error) uploads: // fail: function (e, data) {}, // .bind('fileuploadfail', func); + // Callback for completed (success, abort or error) requests: // always: function (e, data) {}, // .bind('fileuploadalways', func); + // Callback for upload progress events: // progress: function (e, data) {}, // .bind('fileuploadprogress', func); + // Callback for global upload progress events: // progressall: function (e, data) {}, // .bind('fileuploadprogressall', func); + // Callback for uploads start, equivalent to the global ajaxStart event: // start: function (e) {}, // .bind('fileuploadstart', func); + // Callback for uploads stop, equivalent to the global ajaxStop event: // stop: function (e) {}, // .bind('fileuploadstop', func); - // Callback for change events of the fileInput collection: + + // Callback for change events of the fileInput(s): // change: function (e, data) {}, // .bind('fileuploadchange', func); - // Callback for paste events to the dropZone collection: + + // Callback for paste events to the pasteZone(s): // paste: function (e, data) {}, // .bind('fileuploadpaste', func); - // Callback for drop events of the dropZone collection: + + // Callback for drop events of the dropZone(s): // drop: function (e, data) {}, // .bind('fileuploaddrop', func); - // Callback for dragover events of the dropZone collection: + + // Callback for dragover events of the dropZone(s): // dragover: function (e) {}, // .bind('fileuploaddragover', func); + // Callback for the start of each chunk upload request: + // chunksend: function (e, data) {}, // .bind('fileuploadchunksend', func); + + // Callback for successful chunk uploads: + // chunkdone: function (e, data) {}, // .bind('fileuploadchunkdone', func); + + // Callback for failed (abort or error) chunk uploads: + // chunkfail: function (e, data) {}, // .bind('fileuploadchunkfail', func); + + // Callback for completed (success, abort or error) chunk upload requests: + // chunkalways: function (e, data) {}, // .bind('fileuploadchunkalways', func); + // The plugin options are used as settings object for the ajax calls. // The following are jQuery ajax settings required for the file uploads: processData: false, @@ -170,15 +242,36 @@ cache: false }, - // A list of options that require a refresh after assigning a new value: - _refreshOptionsList: [ - 'namespace', - 'dropZone', + // A list of options that require reinitializing event listeners and/or + // special initialization code: + _specialOptions: [ 'fileInput', + 'dropZone', + 'pasteZone', 'multipart', 'forceIframeTransport' ], + _blobSlice: $.support.blobSlice && function () { + var slice = this.slice || this.webkitSlice || this.mozSlice; + return slice.apply(this, arguments); + }, + + _BitrateTimer: function () { + this.timestamp = ((Date.now) ? Date.now() : (new Date()).getTime()); + this.loaded = 0; + this.bitrate = 0; + this.getBitrate = function (now, loaded, interval) { + var timeDiff = now - this.timestamp; + if (!this.bitrate || !interval || timeDiff > interval) { + this.bitrate = (loaded - this.loaded) * (1000 / timeDiff) * 8; + this.loaded = loaded; + this.timestamp = now; + } + return this.bitrate; + }; + }, + _isXHRUpload: function (options) { return !options.forceIframeTransport && ((!options.multipart && $.support.xhrFileUpload) || @@ -189,9 +282,11 @@ var formData; if (typeof options.formData === 'function') { return options.formData(options.form); - } else if ($.isArray(options.formData)) { + } + if ($.isArray(options.formData)) { return options.formData; - } else if (options.formData) { + } + if ($.type(options.formData) === 'object') { formData = []; $.each(options.formData, function (name, value) { formData.push({name: name, value: value}); @@ -209,28 +304,66 @@ return total; }, + _initProgressObject: function (obj) { + var progress = { + loaded: 0, + total: 0, + bitrate: 0 + }; + if (obj._progress) { + $.extend(obj._progress, progress); + } else { + obj._progress = progress; + } + }, + + _initResponseObject: function (obj) { + var prop; + if (obj._response) { + for (prop in obj._response) { + if (obj._response.hasOwnProperty(prop)) { + delete obj._response[prop]; + } + } + } else { + obj._response = {}; + } + }, + _onProgress: function (e, data) { if (e.lengthComputable) { - var total = data.total || this._getTotal(data.files), - loaded = parseInt( - e.loaded / e.total * (data.chunkSize || total), - 10 - ) + (data.uploadedBytes || 0); - this._loaded += loaded - (data.loaded || data.uploadedBytes || 0); - data.lengthComputable = true; - data.loaded = loaded; - data.total = total; + var now = ((Date.now) ? Date.now() : (new Date()).getTime()), + loaded; + if (data._time && data.progressInterval && + (now - data._time < data.progressInterval) && + e.loaded !== e.total) { + return; + } + data._time = now; + loaded = Math.floor( + e.loaded / e.total * (data.chunkSize || data._progress.total) + ) + (data.uploadedBytes || 0); + // Add the difference from the previously loaded state + // to the global loaded counter: + this._progress.loaded += (loaded - data._progress.loaded); + this._progress.bitrate = this._bitrateTimer.getBitrate( + now, + this._progress.loaded, + data.bitrateInterval + ); + data._progress.loaded = data.loaded = loaded; + data._progress.bitrate = data.bitrate = data._bitrateTimer.getBitrate( + now, + loaded, + data.bitrateInterval + ); // Trigger a custom progress event with a total data property set // to the file size(s) of the current upload and a loaded data // property calculated accordingly: this._trigger('progress', e, data); // Trigger a global progress event for all current file uploads, // including ajax calls queued for sequential file uploads: - this._trigger('progressall', e, { - lengthComputable: true, - loaded: this._loaded, - total: this._total - }); + this._trigger('progressall', e, this._progress); } }, @@ -254,34 +387,30 @@ } }, + _isInstanceOf: function (type, obj) { + // Cross-frame instanceof check + return Object.prototype.toString.call(obj) === '[object ' + type + ']'; + }, + _initXHRData: function (options) { - var formData, + var that = this, + formData, file = options.files[0], // Ignore non-multipart setting if not supported: - multipart = options.multipart || !$.support.xhrFileUpload; - if (!multipart || options.blob) { - // For non-multipart uploads and chunked uploads, - // file meta data is not part of the request body, - // so we transmit this data as part of the HTTP headers. - // For cross domain requests, these headers must be allowed - // via Access-Control-Allow-Headers or removed using - // the beforeSend callback: - options.headers = $.extend(options.headers, { - 'X-File-Name': file.name, - 'X-File-Type': file.type, - 'X-File-Size': file.size - }); - if (!options.blob) { - // Non-chunked non-multipart upload: - options.contentType = file.type; - options.data = file; - } else if (!multipart) { - // Chunked non-multipart upload: - options.contentType = 'application/octet-stream'; - options.data = options.blob; - } + multipart = options.multipart || !$.support.xhrFileUpload, + paramName = options.paramName[0]; + options.headers = options.headers || {}; + if (options.contentRange) { + options.headers['Content-Range'] = options.contentRange; + } + if (!multipart || options.blob || !this._isInstanceOf('File', file)) { + options.headers['Content-Disposition'] = 'attachment; filename="' + + encodeURI(file.name) + '"'; } - if (multipart && $.support.xhrFormDataFileUpload) { + if (!multipart) { + options.contentType = file.type; + options.data = options.blob || file; + } else if ($.support.xhrFormDataFileUpload) { if (options.postMessage) { // window.postMessage does not allow sending FormData // objects, so we just add the File/Blob objects to @@ -290,19 +419,19 @@ formData = this._getFormData(options); if (options.blob) { formData.push({ - name: options.paramName, + name: paramName, value: options.blob }); } else { $.each(options.files, function (index, file) { formData.push({ - name: options.paramName, + name: options.paramName[index] || paramName, value: file }); }); } } else { - if (options.formData instanceof FormData) { + if (that._isInstanceOf('FormData', options.formData)) { formData = options.formData; } else { formData = new FormData(); @@ -311,14 +440,18 @@ }); } if (options.blob) { - formData.append(options.paramName, options.blob, file.name); + formData.append(paramName, options.blob, file.name); } else { $.each(options.files, function (index, file) { - // File objects are also Blob instances. // This check allows the tests to run with // dummy objects: - if (file instanceof Blob) { - formData.append(options.paramName, file, file.name); + if (that._isInstanceOf('File', file) || + that._isInstanceOf('Blob', file)) { + formData.append( + options.paramName[index] || paramName, + file, + file.name + ); } }); } @@ -330,13 +463,13 @@ }, _initIframeSettings: function (options) { + var targetHost = $('<a></a>').prop('href', options.url).prop('host'); // Setting the dataType to iframe enables the iframe transport: options.dataType = 'iframe ' + (options.dataType || ''); // The iframe transport accepts a serialized array as form data: options.formData = this._getFormData(options); // Add redirect url to form data on cross-domain uploads: - if (options.redirect && $('<a></a>').prop('href', options.url) - .prop('host') !== location.host) { + if (options.redirect && targetHost && targetHost !== location.host) { options.formData.push({ name: options.redirectParamName || 'redirect', value: options.redirect @@ -358,29 +491,58 @@ options.dataType = 'postmessage ' + (options.dataType || ''); } } else { - this._initIframeSettings(options, 'iframe'); + this._initIframeSettings(options); } }, + _getParamName: function (options) { + var fileInput = $(options.fileInput), + paramName = options.paramName; + if (!paramName) { + paramName = []; + fileInput.each(function () { + var input = $(this), + name = input.prop('name') || 'files[]', + i = (input.prop('files') || [1]).length; + while (i) { + paramName.push(name); + i -= 1; + } + }); + if (!paramName.length) { + paramName = [fileInput.prop('name') || 'files[]']; + } + } else if (!$.isArray(paramName)) { + paramName = [paramName]; + } + return paramName; + }, + _initFormSettings: function (options) { // Retrieve missing options from the input field and the // associated form, if available: if (!options.form || !options.form.length) { options.form = $(options.fileInput.prop('form')); + // If the given file input doesn't have an associated form, + // use the default widget file input's form: + if (!options.form.length) { + options.form = $(this.options.fileInput.prop('form')); + } } - if (!options.paramName) { - options.paramName = options.fileInput.prop('name') || - 'files[]'; - } + options.paramName = this._getParamName(options); if (!options.url) { options.url = options.form.prop('action') || location.href; } // The HTTP request method must be "POST" or "PUT": options.type = (options.type || options.form.prop('method') || '') .toUpperCase(); - if (options.type !== 'POST' && options.type !== 'PUT') { + if (options.type !== 'POST' && options.type !== 'PUT' && + options.type !== 'PATCH') { options.type = 'POST'; } + if (!options.formAcceptCharset) { + options.formAcceptCharset = options.form.attr('accept-charset'); + } }, _getAJAXSettings: function (data) { @@ -390,6 +552,21 @@ return options; }, + // jQuery 1.6 doesn't provide .state(), + // while jQuery 1.8+ removed .isRejected() and .isResolved(): + _getDeferredState: function (deferred) { + if (deferred.state) { + return deferred.state(); + } + if (deferred.isResolved()) { + return 'resolved'; + } + if (deferred.isRejected()) { + return 'rejected'; + } + return 'pending'; + }, + // Maps jqXHR callbacks to the equivalent // methods of the given Promise object: _enhancePromise: function (promise) { @@ -414,24 +591,77 @@ return this._enhancePromise(promise); }, + // Adds convenience methods to the data callback argument: + _addConvenienceMethods: function (e, data) { + var that = this, + getPromise = function (data) { + return $.Deferred().resolveWith(that, [data]).promise(); + }; + data.process = function (resolveFunc, rejectFunc) { + if (resolveFunc || rejectFunc) { + data._processQueue = this._processQueue = + (this._processQueue || getPromise(this)) + .pipe(resolveFunc, rejectFunc); + } + return this._processQueue || getPromise(this); + }; + data.submit = function () { + if (this.state() !== 'pending') { + data.jqXHR = this.jqXHR = + (that._trigger('submit', e, this) !== false) && + that._onSend(e, this); + } + return this.jqXHR || that._getXHRPromise(); + }; + data.abort = function () { + if (this.jqXHR) { + return this.jqXHR.abort(); + } + return that._getXHRPromise(); + }; + data.state = function () { + if (this.jqXHR) { + return that._getDeferredState(this.jqXHR); + } + if (this._processQueue) { + return that._getDeferredState(this._processQueue); + } + }; + data.progress = function () { + return this._progress; + }; + data.response = function () { + return this._response; + }; + }, + + // Parses the Range header from the server response + // and returns the uploaded bytes: + _getUploadedBytes: function (jqXHR) { + var range = jqXHR.getResponseHeader('Range'), + parts = range && range.split('-'), + upperBytesPos = parts && parts.length > 1 && + parseInt(parts[1], 10); + return upperBytesPos && upperBytesPos + 1; + }, + // Uploads a file in multiple, sequential requests // by splitting the file up in multiple blob chunks. // If the second parameter is true, only tests if the file // should be uploaded in chunks, but does not invoke any // upload requests: _chunkedUpload: function (options, testOnly) { + options.uploadedBytes = options.uploadedBytes || 0; var that = this, file = options.files[0], fs = file.size, - ub = options.uploadedBytes = options.uploadedBytes || 0, + ub = options.uploadedBytes, mcs = options.maxChunkSize || fs, - // Use the Blob methods with the slice implementation - // according to the W3C Blob API specification: - slice = file.webkitSlice || file.mozSlice || file.slice, - upload, - n, + slice = this._blobSlice, + dfd = $.Deferred(), + promise = dfd.promise(), jqXHR, - pipe; + upload; if (!(this._isXHRUpload(options) && slice && (ub || mcs < fs)) || options.data) { return false; @@ -440,62 +670,84 @@ return true; } if (ub >= fs) { - file.error = 'uploadedBytes'; + file.error = options.i18n('uploadedBytes'); return this._getXHRPromise( false, options.context, [null, 'error', file.error] ); } - // n is the number of blobs to upload, - // calculated via filesize, uploaded bytes and max chunk size: - n = Math.ceil((fs - ub) / mcs); - // The chunk upload method accepting the chunk number as parameter: - upload = function (i) { - if (!i) { - return that._getXHRPromise(true, options.context); - } - // Upload the blobs in sequential order: - return upload(i -= 1).pipe(function () { - // Clone the options object for each chunk upload: - var o = $.extend({}, options); - o.blob = slice.call( - file, - ub + i * mcs, - ub + (i + 1) * mcs - ); - // Store the current chunk size, as the blob itself - // will be dereferenced after data processing: - o.chunkSize = o.blob.size; - // Process the upload data (the blob and potential form data): - that._initXHRData(o); - // Add progress listeners for this chunk upload: - that._initProgressListener(o); - jqXHR = ($.ajax(o) || that._getXHRPromise(false, o.context)) - .done(function () { - // Create a progress event if upload is done and - // no progress event has been invoked for this chunk: - if (!o.loaded) { - that._onProgress($.Event('progress', { - lengthComputable: true, - loaded: o.chunkSize, - total: o.chunkSize - }), o); - } - options.uploadedBytes = o.uploadedBytes += - o.chunkSize; - }); - return jqXHR; - }); + // The chunk upload method: + upload = function () { + // Clone the options object for each chunk upload: + var o = $.extend({}, options), + currentLoaded = o._progress.loaded; + o.blob = slice.call( + file, + ub, + ub + mcs, + file.type + ); + // Store the current chunk size, as the blob itself + // will be dereferenced after data processing: + o.chunkSize = o.blob.size; + // Expose the chunk bytes position range: + o.contentRange = 'bytes ' + ub + '-' + + (ub + o.chunkSize - 1) + '/' + fs; + // Process the upload data (the blob and potential form data): + that._initXHRData(o); + // Add progress listeners for this chunk upload: + that._initProgressListener(o); + jqXHR = ((that._trigger('chunksend', null, o) !== false && $.ajax(o)) || + that._getXHRPromise(false, o.context)) + .done(function (result, textStatus, jqXHR) { + ub = that._getUploadedBytes(jqXHR) || + (ub + o.chunkSize); + // Create a progress event if no final progress event + // with loaded equaling total has been triggered + // for this chunk: + if (currentLoaded + o.chunkSize - o._progress.loaded) { + that._onProgress($.Event('progress', { + lengthComputable: true, + loaded: ub - o.uploadedBytes, + total: ub - o.uploadedBytes + }), o); + } + options.uploadedBytes = o.uploadedBytes = ub; + o.result = result; + o.textStatus = textStatus; + o.jqXHR = jqXHR; + that._trigger('chunkdone', null, o); + that._trigger('chunkalways', null, o); + if (ub < fs) { + // File upload not yet complete, + // continue with the next chunk: + upload(); + } else { + dfd.resolveWith( + o.context, + [result, textStatus, jqXHR] + ); + } + }) + .fail(function (jqXHR, textStatus, errorThrown) { + o.jqXHR = jqXHR; + o.textStatus = textStatus; + o.errorThrown = errorThrown; + that._trigger('chunkfail', null, o); + that._trigger('chunkalways', null, o); + dfd.rejectWith( + o.context, + [jqXHR, textStatus, errorThrown] + ); + }); }; - // Return the piped Promise object, enhanced with an abort method, - // which is delegated to the jqXHR object of the current upload, - // and jqXHR callbacks mapped to the equivalent Promise methods: - pipe = upload(n); - pipe.abort = function () { + this._enhancePromise(promise); + promise.abort = function () { return jqXHR.abort(); }; - return this._enhancePromise(pipe); + upload(); + return promise; }, _beforeSend: function (e, data) { @@ -504,99 +756,113 @@ // and no other uploads are currently running, // equivalent to the global ajaxStart event: this._trigger('start'); + // Set timer for global bitrate progress calculation: + this._bitrateTimer = new this._BitrateTimer(); + // Reset the global progress values: + this._progress.loaded = this._progress.total = 0; + this._progress.bitrate = 0; } + // Make sure the container objects for the .response() and + // .progress() methods on the data object are available + // and reset to their initial state: + this._initResponseObject(data); + this._initProgressObject(data); + data._progress.loaded = data.loaded = data.uploadedBytes || 0; + data._progress.total = data.total = this._getTotal(data.files) || 1; + data._progress.bitrate = data.bitrate = 0; this._active += 1; // Initialize the global progress values: - this._loaded += data.uploadedBytes || 0; - this._total += this._getTotal(data.files); + this._progress.loaded += data.loaded; + this._progress.total += data.total; }, _onDone: function (result, textStatus, jqXHR, options) { - if (!this._isXHRUpload(options)) { - // Create a progress event for each iframe load: + var total = options._progress.total, + response = options._response; + if (options._progress.loaded < total) { + // Create a progress event if no final progress event + // with loaded equaling total has been triggered: this._onProgress($.Event('progress', { lengthComputable: true, - loaded: 1, - total: 1 + loaded: total, + total: total }), options); } - options.result = result; - options.textStatus = textStatus; - options.jqXHR = jqXHR; + response.result = options.result = result; + response.textStatus = options.textStatus = textStatus; + response.jqXHR = options.jqXHR = jqXHR; this._trigger('done', null, options); }, _onFail: function (jqXHR, textStatus, errorThrown, options) { - options.jqXHR = jqXHR; - options.textStatus = textStatus; - options.errorThrown = errorThrown; - this._trigger('fail', null, options); + var response = options._response; if (options.recalculateProgress) { // Remove the failed (error or abort) file upload from // the global progress calculation: - this._loaded -= options.loaded || options.uploadedBytes || 0; - this._total -= options.total || this._getTotal(options.files); + this._progress.loaded -= options._progress.loaded; + this._progress.total -= options._progress.total; } + response.jqXHR = options.jqXHR = jqXHR; + response.textStatus = options.textStatus = textStatus; + response.errorThrown = options.errorThrown = errorThrown; + this._trigger('fail', null, options); }, _onAlways: function (jqXHRorResult, textStatus, jqXHRorError, options) { - this._active -= 1; - options.textStatus = textStatus; - if (jqXHRorError && jqXHRorError.always) { - options.jqXHR = jqXHRorError; - options.result = jqXHRorResult; - } else { - options.jqXHR = jqXHRorResult; - options.errorThrown = jqXHRorError; - } + // jqXHRorResult, textStatus and jqXHRorError are added to the + // options object via done and fail callbacks this._trigger('always', null, options); - if (this._active === 0) { - // The stop callback is triggered when all uploads have - // been completed, equivalent to the global ajaxStop event: - this._trigger('stop'); - // Reset the global progress values: - this._loaded = this._total = 0; - } }, _onSend: function (e, data) { + if (!data.submit) { + this._addConvenienceMethods(e, data); + } var that = this, jqXHR, + aborted, slot, pipe, options = that._getAJAXSettings(data), - send = function (resolve, args) { + send = function () { that._sending += 1; + // Set timer for bitrate progress calculation: + options._bitrateTimer = new that._BitrateTimer(); jqXHR = jqXHR || ( - (resolve !== false && - that._trigger('send', e, options) !== false && - (that._chunkedUpload(options) || $.ajax(options))) || - that._getXHRPromise(false, options.context, args) + ((aborted || that._trigger('send', e, options) === false) && + that._getXHRPromise(false, options.context, aborted)) || + that._chunkedUpload(options) || $.ajax(options) ).done(function (result, textStatus, jqXHR) { that._onDone(result, textStatus, jqXHR, options); }).fail(function (jqXHR, textStatus, errorThrown) { that._onFail(jqXHR, textStatus, errorThrown, options); }).always(function (jqXHRorResult, textStatus, jqXHRorError) { - that._sending -= 1; that._onAlways( jqXHRorResult, textStatus, jqXHRorError, options ); + that._sending -= 1; + that._active -= 1; if (options.limitConcurrentUploads && options.limitConcurrentUploads > that._sending) { // Start the next queued upload, // that has not been aborted: var nextSlot = that._slots.shift(); while (nextSlot) { - if (!nextSlot.isRejected()) { + if (that._getDeferredState(nextSlot) === 'pending') { nextSlot.resolve(); break; } nextSlot = that._slots.shift(); } } + if (that._active === 0) { + // The stop callback is triggered when all uploads have + // been completed, equivalent to the global ajaxStop event: + that._trigger('stop'); + } }); return jqXHR; }; @@ -609,18 +875,19 @@ this._slots.push(slot); pipe = slot.pipe(send); } else { - pipe = (this._sequence = this._sequence.pipe(send, send)); + this._sequence = this._sequence.pipe(send, send); + pipe = this._sequence; } // Return the piped Promise object, enhanced with an abort method, // which is delegated to the jqXHR object of the current upload, // and jqXHR callbacks mapped to the equivalent Promise methods: pipe.abort = function () { - var args = [undefined, 'abort', 'abort']; + aborted = [undefined, 'abort', 'abort']; if (!jqXHR) { if (slot) { - slot.rejectWith(args); + slot.rejectWith(options.context, aborted); } - return send(false, args); + return send(); } return jqXHR.abort(); }; @@ -634,40 +901,43 @@ result = true, options = $.extend({}, this.options, data), limit = options.limitMultiFileUploads, + paramName = this._getParamName(options), + paramNameSet, + paramNameSlice, fileSet, i; if (!(options.singleFileUploads || limit) || !this._isXHRUpload(options)) { fileSet = [data.files]; + paramNameSet = [paramName]; } else if (!options.singleFileUploads && limit) { fileSet = []; + paramNameSet = []; for (i = 0; i < data.files.length; i += limit) { fileSet.push(data.files.slice(i, i + limit)); + paramNameSlice = paramName.slice(i, i + limit); + if (!paramNameSlice.length) { + paramNameSlice = paramName; + } + paramNameSet.push(paramNameSlice); } + } else { + paramNameSet = paramName; } data.originalFiles = data.files; $.each(fileSet || data.files, function (index, element) { - var files = fileSet ? element : [element], - newData = $.extend({}, data, {files: files}); - newData.submit = function () { - newData.jqXHR = this.jqXHR = - (that._trigger('submit', e, this) !== false) && - that._onSend(e, this); - return this.jqXHR; - }; - return (result = that._trigger('add', e, newData)); + var newData = $.extend({}, data); + newData.files = fileSet ? element : [element]; + newData.paramName = paramNameSet[index]; + that._initResponseObject(newData); + that._initProgressObject(newData); + that._addConvenienceMethods(e, newData); + result = that._trigger('add', e, newData); + return result; }); return result; }, - // File Normalization for Gecko 1.9.1 (Firefox 3.5) support: - _normalizeFile: function (index, file) { - if (file.name === undefined && file.size === undefined) { - file.name = file.fileName; - file.size = file.fileSize; - } - }, - _replaceFileInput: function (input) { var inputClone = input.clone(true); $('<form></form>').append(inputClone)[0].reset(); @@ -677,7 +947,7 @@ // Avoid memory leaks with the detached file input: $.cleanData(input.unbind('remove')); // Replace the original file input element in the fileInput - // collection with the clone, which has been copied including + // elements set with the clone, which has been copied including // event handlers: this.options.fileInput = this.options.fileInput.map(function (i, el) { if (el === input[0]) { @@ -692,102 +962,229 @@ } }, - _onChange: function (e) { - var that = e.data.fileupload, - data = { - files: $.each($.makeArray(e.target.files), that._normalizeFile), - fileInput: $(e.target), - form: $(e.target.form) - }; - if (!data.files.length) { + _handleFileTreeEntry: function (entry, path) { + var that = this, + dfd = $.Deferred(), + errorHandler = function (e) { + if (e && !e.entry) { + e.entry = entry; + } + // Since $.when returns immediately if one + // Deferred is rejected, we use resolve instead. + // This allows valid files and invalid items + // to be returned together in one set: + dfd.resolve([e]); + }, + dirReader; + path = path || ''; + if (entry.isFile) { + if (entry._file) { + // Workaround for Chrome bug #149735 + entry._file.relativePath = path; + dfd.resolve(entry._file); + } else { + entry.file(function (file) { + file.relativePath = path; + dfd.resolve(file); + }, errorHandler); + } + } else if (entry.isDirectory) { + dirReader = entry.createReader(); + dirReader.readEntries(function (entries) { + that._handleFileTreeEntries( + entries, + path + entry.name + '/' + ).done(function (files) { + dfd.resolve(files); + }).fail(errorHandler); + }, errorHandler); + } else { + // Return an empy list for file system items + // other than files or directories: + dfd.resolve([]); + } + return dfd.promise(); + }, + + _handleFileTreeEntries: function (entries, path) { + var that = this; + return $.when.apply( + $, + $.map(entries, function (entry) { + return that._handleFileTreeEntry(entry, path); + }) + ).pipe(function () { + return Array.prototype.concat.apply( + [], + arguments + ); + }); + }, + + _getDroppedFiles: function (dataTransfer) { + dataTransfer = dataTransfer || {}; + var items = dataTransfer.items; + if (items && items.length && (items[0].webkitGetAsEntry || + items[0].getAsEntry)) { + return this._handleFileTreeEntries( + $.map(items, function (item) { + var entry; + if (item.webkitGetAsEntry) { + entry = item.webkitGetAsEntry(); + if (entry) { + // Workaround for Chrome bug #149735: + entry._file = item.getAsFile(); + } + return entry; + } + return item.getAsEntry(); + }) + ); + } + return $.Deferred().resolve( + $.makeArray(dataTransfer.files) + ).promise(); + }, + + _getSingleFileInputFiles: function (fileInput) { + fileInput = $(fileInput); + var entries = fileInput.prop('webkitEntries') || + fileInput.prop('entries'), + files, + value; + if (entries && entries.length) { + return this._handleFileTreeEntries(entries); + } + files = $.makeArray(fileInput.prop('files')); + if (!files.length) { + value = fileInput.prop('value'); + if (!value) { + return $.Deferred().resolve([]).promise(); + } // If the files property is not available, the browser does not // support the File API and we add a pseudo File object with // the input value as name with path information removed: - data.files = [{name: e.target.value.replace(/^.*\\/, '')}]; - } - if (that.options.replaceFileInput) { - that._replaceFileInput(data.fileInput); + files = [{name: value.replace(/^.*\\/, '')}]; + } else if (files[0].name === undefined && files[0].fileName) { + // File normalization for Safari 4 and Firefox 3: + $.each(files, function (index, file) { + file.name = file.fileName; + file.size = file.fileSize; + }); } - if (that._trigger('change', e, data) === false || - that._onAdd(e, data) === false) { - return false; + return $.Deferred().resolve(files).promise(); + }, + + _getFileInputFiles: function (fileInput) { + if (!(fileInput instanceof $) || fileInput.length === 1) { + return this._getSingleFileInputFiles(fileInput); } + return $.when.apply( + $, + $.map(fileInput, this._getSingleFileInputFiles) + ).pipe(function () { + return Array.prototype.concat.apply( + [], + arguments + ); + }); + }, + + _onChange: function (e) { + var that = this, + data = { + fileInput: $(e.target), + form: $(e.target.form) + }; + this._getFileInputFiles(data.fileInput).always(function (files) { + data.files = files; + if (that.options.replaceFileInput) { + that._replaceFileInput(data.fileInput); + } + if (that._trigger('change', e, data) !== false) { + that._onAdd(e, data); + } + }); }, _onPaste: function (e) { - var that = e.data.fileupload, - cbd = e.originalEvent.clipboardData, - items = (cbd && cbd.items) || [], + var items = e.originalEvent && e.originalEvent.clipboardData && + e.originalEvent.clipboardData.items, data = {files: []}; - $.each(items, function (index, item) { - var file = item.getAsFile && item.getAsFile(); - if (file) { - data.files.push(file); + if (items && items.length) { + $.each(items, function (index, item) { + var file = item.getAsFile && item.getAsFile(); + if (file) { + data.files.push(file); + } + }); + if (this._trigger('paste', e, data) === false || + this._onAdd(e, data) === false) { + return false; } - }); - if (that._trigger('paste', e, data) === false || - that._onAdd(e, data) === false) { - return false; } }, _onDrop: function (e) { - var that = e.data.fileupload, - dataTransfer = e.dataTransfer = e.originalEvent.dataTransfer, - data = { - files: $.each( - $.makeArray(dataTransfer && dataTransfer.files), - that._normalizeFile - ) - }; - if (that._trigger('drop', e, data) === false || - that._onAdd(e, data) === false) { - return false; + e.dataTransfer = e.originalEvent && e.originalEvent.dataTransfer; + var that = this, + dataTransfer = e.dataTransfer, + data = {}; + if (dataTransfer && dataTransfer.files && dataTransfer.files.length) { + e.preventDefault(); + this._getDroppedFiles(dataTransfer).always(function (files) { + data.files = files; + if (that._trigger('drop', e, data) !== false) { + that._onAdd(e, data); + } + }); } - e.preventDefault(); }, _onDragOver: function (e) { - var that = e.data.fileupload, - dataTransfer = e.dataTransfer = e.originalEvent.dataTransfer; - if (that._trigger('dragover', e) === false) { - return false; - } + e.dataTransfer = e.originalEvent && e.originalEvent.dataTransfer; + var dataTransfer = e.dataTransfer; if (dataTransfer) { - dataTransfer.dropEffect = dataTransfer.effectAllowed = 'copy'; + if (this._trigger('dragover', e) === false) { + return false; + } + if ($.inArray('Files', dataTransfer.types) !== -1) { + dataTransfer.dropEffect = 'copy'; + e.preventDefault(); + } } - e.preventDefault(); }, _initEventHandlers: function () { - var ns = this.options.namespace; if (this._isXHRUpload(this.options)) { - this.options.dropZone - .bind('dragover.' + ns, {fileupload: this}, this._onDragOver) - .bind('drop.' + ns, {fileupload: this}, this._onDrop) - .bind('paste.' + ns, {fileupload: this}, this._onPaste); + this._on(this.options.dropZone, { + dragover: this._onDragOver, + drop: this._onDrop + }); + this._on(this.options.pasteZone, { + paste: this._onPaste + }); + } + if ($.support.fileInput) { + this._on(this.options.fileInput, { + change: this._onChange + }); } - this.options.fileInput - .bind('change.' + ns, {fileupload: this}, this._onChange); }, _destroyEventHandlers: function () { - var ns = this.options.namespace; - this.options.dropZone - .unbind('dragover.' + ns, this._onDragOver) - .unbind('drop.' + ns, this._onDrop) - .unbind('paste.' + ns, this._onPaste); - this.options.fileInput - .unbind('change.' + ns, this._onChange); + this._off(this.options.dropZone, 'dragover drop'); + this._off(this.options.pasteZone, 'paste'); + this._off(this.options.fileInput, 'change'); }, _setOption: function (key, value) { - var refresh = $.inArray(key, this._refreshOptionsList) !== -1; - if (refresh) { + var reinit = $.inArray(key, this._specialOptions) !== -1; + if (reinit) { this._destroyEventHandlers(); } - $.Widget.prototype._setOption.call(this, key, value); - if (refresh) { + this._super(key, value); + if (reinit) { this._initSpecialOptions(); this._initEventHandlers(); } @@ -796,42 +1193,68 @@ _initSpecialOptions: function () { var options = this.options; if (options.fileInput === undefined) { - options.fileInput = this.element.is('input:file') ? - this.element : this.element.find('input:file'); + options.fileInput = this.element.is('input[type="file"]') ? + this.element : this.element.find('input[type="file"]'); } else if (!(options.fileInput instanceof $)) { options.fileInput = $(options.fileInput); } if (!(options.dropZone instanceof $)) { options.dropZone = $(options.dropZone); } + if (!(options.pasteZone instanceof $)) { + options.pasteZone = $(options.pasteZone); + } + }, + + _getRegExp: function (str) { + var parts = str.split('/'), + modifiers = parts.pop(); + parts.shift(); + return new RegExp(parts.join('/'), modifiers); + }, + + _isRegExpOption: function (key, value) { + return key !== 'url' && $.type(value) === 'string' && + /^\/.*\/[igm]{0,3}$/.test(value); + }, + + _initDataAttributes: function () { + var that = this, + options = this.options; + // Initialize options set via HTML5 data-attributes: + $.each( + $(this.element[0].cloneNode(false)).data(), + function (key, value) { + if (that._isRegExpOption(key, value)) { + value = that._getRegExp(value); + } + options[key] = value; + } + ); }, _create: function () { - var options = this.options, - dataOpts = $.extend({}, this.element.data()); - dataOpts[this.widgetName] = undefined; - $.extend(options, dataOpts); - options.namespace = options.namespace || this.widgetName; + this._initDataAttributes(); this._initSpecialOptions(); this._slots = []; this._sequence = this._getXHRPromise(true); - this._sending = this._active = this._loaded = this._total = 0; + this._sending = this._active = 0; + this._initProgressObject(this); this._initEventHandlers(); }, - destroy: function () { - this._destroyEventHandlers(); - $.Widget.prototype.destroy.call(this); - }, - - enable: function () { - $.Widget.prototype.enable.call(this); - this._initEventHandlers(); + // This method is exposed to the widget API and allows to query + // the number of active uploads: + active: function () { + return this._active; }, - disable: function () { - this._destroyEventHandlers(); - $.Widget.prototype.disable.call(this); + // This method is exposed to the widget API and allows to query + // the widget upload progress. + // It returns an object with loaded, total and bitrate properties + // for the running uploads: + progress: function () { + return this._progress; }, // This method is exposed to the widget API and allows adding files @@ -839,21 +1262,65 @@ // must have a files property and can contain additional options: // .fileupload('add', {files: filesList}); add: function (data) { + var that = this; if (!data || this.options.disabled) { return; } - data.files = $.each($.makeArray(data.files), this._normalizeFile); - this._onAdd(null, data); + if (data.fileInput && !data.files) { + this._getFileInputFiles(data.fileInput).always(function (files) { + data.files = files; + that._onAdd(null, data); + }); + } else { + data.files = $.makeArray(data.files); + this._onAdd(null, data); + } }, // This method is exposed to the widget API and allows sending files // using the fileupload API. The data parameter accepts an object which - // must have a files property and can contain additional options: + // must have a files or fileInput property and can contain additional options: // .fileupload('send', {files: filesList}); // The method returns a Promise object for the file upload call. send: function (data) { if (data && !this.options.disabled) { - data.files = $.each($.makeArray(data.files), this._normalizeFile); + if (data.fileInput && !data.files) { + var that = this, + dfd = $.Deferred(), + promise = dfd.promise(), + jqXHR, + aborted; + promise.abort = function () { + aborted = true; + if (jqXHR) { + return jqXHR.abort(); + } + dfd.reject(null, 'abort', 'abort'); + return promise; + }; + this._getFileInputFiles(data.fileInput).always( + function (files) { + if (aborted) { + return; + } + if (!files.length) { + dfd.reject(); + return; + } + data.files = files; + jqXHR = that._onSend(null, data).then( + function (result, textStatus, jqXHR) { + dfd.resolve(result, textStatus, jqXHR); + }, + function (jqXHR, textStatus, errorThrown) { + dfd.reject(jqXHR, textStatus, errorThrown); + } + ); + } + ); + return this._enhancePromise(promise); + } + data.files = $.makeArray(data.files); if (data.files.length) { return this._onSend(null, data); } @@ -863,4 +1330,4 @@ }); -})); +}));
\ No newline at end of file diff --git a/apps/files/js/jquery.iframe-transport.js b/apps/files/js/jquery.iframe-transport.js index d85c0c11297..5c9df77976b 100644 --- a/apps/files/js/jquery.iframe-transport.js +++ b/apps/files/js/jquery.iframe-transport.js @@ -1,5 +1,5 @@ /* - * jQuery Iframe Transport Plugin 1.3 + * jQuery Iframe Transport Plugin 1.7 * https://github.com/blueimp/jQuery-File-Upload * * Copyright 2011, Sebastian Tschan @@ -30,27 +30,45 @@ // The iframe transport accepts three additional options: // options.fileInput: a jQuery collection of file input fields // options.paramName: the parameter name for the file form data, - // overrides the name property of the file input field(s) + // overrides the name property of the file input field(s), + // can be a string or an array of strings. // options.formData: an array of objects with name and value properties, // equivalent to the return data of .serializeArray(), e.g.: // [{name: 'a', value: 1}, {name: 'b', value: 2}] $.ajaxTransport('iframe', function (options) { - if (options.async && (options.type === 'POST' || options.type === 'GET')) { + if (options.async) { var form, - iframe; + iframe, + addParamChar; return { send: function (_, completeCallback) { form = $('<form style="display:none;"></form>'); + form.attr('accept-charset', options.formAcceptCharset); + addParamChar = /\?/.test(options.url) ? '&' : '?'; + // XDomainRequest only supports GET and POST: + if (options.type === 'DELETE') { + options.url = options.url + addParamChar + '_method=DELETE'; + options.type = 'POST'; + } else if (options.type === 'PUT') { + options.url = options.url + addParamChar + '_method=PUT'; + options.type = 'POST'; + } else if (options.type === 'PATCH') { + options.url = options.url + addParamChar + '_method=PATCH'; + options.type = 'POST'; + } // javascript:false as initial iframe src // prevents warning popups on HTTPS in IE6. // IE versions below IE8 cannot set the name property of // elements that have already been added to the DOM, // so we set the name along with the iframe HTML markup: + counter += 1; iframe = $( '<iframe src="javascript:false;" name="iframe-transport-' + - (counter += 1) + '"></iframe>' + counter + '"></iframe>' ).bind('load', function () { - var fileInputClones; + var fileInputClones, + paramNames = $.isArray(options.paramName) ? + options.paramName : [options.paramName]; iframe .unbind('load') .bind('load', function () { @@ -79,7 +97,12 @@ // (happens on form submits to iframe targets): $('<iframe src="javascript:false;"></iframe>') .appendTo(form); - form.remove(); + window.setTimeout(function () { + // Removing the form in a setTimeout call + // allows Chrome's developer tools to display + // the response result + form.remove(); + }, 0); }); form .prop('target', iframe.prop('name')) @@ -101,8 +124,11 @@ return fileInputClones[index]; }); if (options.paramName) { - options.fileInput.each(function () { - $(this).prop('name', options.paramName); + options.fileInput.each(function (index) { + $(this).prop( + 'name', + paramNames[index] || options.paramName + ); }); } // Appending the file input fields to the hidden form @@ -144,22 +170,36 @@ }); // The iframe transport returns the iframe content document as response. - // The following adds converters from iframe to text, json, html, and script: + // The following adds converters from iframe to text, json, html, xml + // and script. + // Please note that the Content-Type for JSON responses has to be text/plain + // or text/html, if the browser doesn't include application/json in the + // Accept header, else IE will show a download dialog. + // The Content-Type for XML responses on the other hand has to be always + // application/xml or text/xml, so IE properly parses the XML response. + // See also + // https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#content-type-negotiation $.ajaxSetup({ converters: { 'iframe text': function (iframe) { - return $(iframe[0].body).text(); + return iframe && $(iframe[0].body).text(); }, 'iframe json': function (iframe) { - return $.parseJSON($(iframe[0].body).text()); + return iframe && $.parseJSON($(iframe[0].body).text()); }, 'iframe html': function (iframe) { - return $(iframe[0].body).html(); + return iframe && $(iframe[0].body).html(); + }, + 'iframe xml': function (iframe) { + var xmlDoc = iframe && iframe[0]; + return xmlDoc && $.isXMLDoc(xmlDoc) ? xmlDoc : + $.parseXML((xmlDoc.XMLDocument && xmlDoc.XMLDocument.xml) || + $(xmlDoc.body).html()); }, 'iframe script': function (iframe) { - return $.globalEval($(iframe[0].body).text()); + return iframe && $.globalEval($(iframe[0].body).text()); } } }); -})); +}));
\ No newline at end of file diff --git a/apps/files/templates/fileexists.html b/apps/files/templates/fileexists.html new file mode 100644 index 00000000000..a5b2fb76908 --- /dev/null +++ b/apps/files/templates/fileexists.html @@ -0,0 +1,26 @@ +<div id="{dialog_name}" title="{title}" class="fileexists"> + <span class="why">{why}<!-- Which files do you want to keep --></span><br/> + <span class="what">{what}<!-- If you select both versions, the copied file will have a number added to its name. --></span><br/> + <br/> + <table> + <th><label><input class="allnewfiles" type="checkbox" />New Files<span class="count"></span></label></th> + <th><label><input class="allexistingfiles" type="checkbox" />Already existing files<span class="count"></span></label></th> + </table> + <div class="conflicts"> + <div class="conflict template"> + <div class="filename"></div> + <div class="replacement"> + <input type="checkbox" /> + <span class="svg icon"></span> + <div class="mtime"></div> + <div class="size"></div> + </div> + <div class="original"> + <input type="checkbox" /> + <span class="svg icon"></span> + <div class="mtime"></div> + <div class="size"></div> + </div> + </div> + </div> +</div> diff --git a/apps/files_sharing/js/public.js b/apps/files_sharing/js/public.js index 357c6fdf540..ac121fd08e2 100644 --- a/apps/files_sharing/js/public.js +++ b/apps/files_sharing/js/public.js @@ -62,7 +62,10 @@ $(document).ready(function() { // Add Uploadprogress Wrapper to controls bar $('#controls').append($('#additional_controls div#uploadprogresswrapper')); - // Cancel upload trigger - $('#cancel_upload_button').click(Files.cancelUploads); + // Cancel upload trigger + $('#cancel_upload_button').click(function() { + OC.Upload.cancelUploads(); + procesSelection(); + }); }); diff --git a/core/img/actions/triangle-e.png b/core/img/actions/triangle-e.png Binary files differnew file mode 100644 index 00000000000..40206a8961b --- /dev/null +++ b/core/img/actions/triangle-e.png diff --git a/core/img/actions/triangle-e.svg b/core/img/actions/triangle-e.svg new file mode 100644 index 00000000000..06f5790c6ce --- /dev/null +++ b/core/img/actions/triangle-e.svg @@ -0,0 +1,54 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + height="16px" + width="16px" + version="1.1" + id="svg2" + inkscape:version="0.48.4 r9939" + sodipodi:docname="triangle-e.svg"> + <metadata + id="metadata10"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + </cc:Work> + </rdf:RDF> + </metadata> + <defs + id="defs8" /> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="640" + inkscape:window-height="480" + id="namedview6" + showgrid="false" + inkscape:zoom="14.75" + inkscape:cx="8" + inkscape:cy="8" + inkscape:window-x="0" + inkscape:window-y="27" + inkscape:window-maximized="0" + inkscape:current-layer="svg2" /> + <path + style="text-indent:0;text-transform:none;block-progression:tb;color:#000000" + d="M 4,12 12,8 4.011,4 z" + id="path4" + inkscape:connector-curvature="0" /> +</svg> diff --git a/core/js/jquery.ocdialog.js b/core/js/jquery.ocdialog.js index bafbd0e0e9f..0266599d21d 100644 --- a/core/js/jquery.ocdialog.js +++ b/core/js/jquery.ocdialog.js @@ -40,6 +40,9 @@ } // Escape if(event.keyCode === 27 && self.options.closeOnEscape) { + if (self.closeCB) { + self.closeCB(); + } self.close(); return false; } @@ -101,6 +104,9 @@ } $.each(value, function(idx, val) { var $button = $('<button>').text(val.text); + if (val.classes) { + $button.addClass(val.classes); + } if(val.defaultButton) { $button.addClass('primary'); self.$defaultButton = $button; diff --git a/core/js/oc-dialogs.js b/core/js/oc-dialogs.js index f184a1022bc..77af1a2dde5 100644 --- a/core/js/oc-dialogs.js +++ b/core/js/oc-dialogs.js @@ -207,9 +207,182 @@ var OCdialogs = { OCdialogs.dialogs_counter++; }) .fail(function() { - alert(t('core', 'Error loading file picker template')); + alert(t('core', 'Error loading message template')); }); }, + _fileexistsshown: false, + /** + * Displays file exists dialog + * @param {object} data upload object + * @param {object} original file with name, size and mtime + * @param {object} replacement file with name, size and mtime + * @param {object} controller with onCancel, onSkip, onReplace and onRename methods + */ + fileexists:function(data, original, replacement, controller) { + var self = this; + var addConflict = function(conflicts, original, replacement) { + + var conflict = conflicts.find('.conflict.template').clone(); + + conflict.data('data',data); + + conflict.find('.filename').text(original.name); + conflict.find('.original .size').text(humanFileSize(original.size)); + conflict.find('.original .mtime').text(formatDate(original.mtime*1000)); + conflict.find('.replacement .size').text(humanFileSize(replacement.size)); + conflict.find('.replacement .mtime').text(formatDate(replacement.lastModifiedDate)); + var path = getPathForPreview(original.name); + lazyLoadPreview(path, original.type, function(previewpath){ + conflict.find('.original .icon').css('background-image','url('+previewpath+')'); + }); + getMimeIcon(replacement.type,function(path){ + conflict.find('.replacement .icon').css('background-image','url('+path+')'); + }); + conflict.removeClass('template'); + conflicts.append(conflict); + + //set more recent mtime bold + if (replacement.lastModifiedDate.getTime() > original.mtime*1000) { + conflict.find('.replacement .mtime').css('font-weight', 'bold'); + } else if (replacement.lastModifiedDate.getTime() < original.mtime*1000) { + conflict.find('.original .mtime').css('font-weight', 'bold'); + } else { + //TODO add to same mtime collection? + } + + // set bigger size bold + if (replacement.size > original.size) { + conflict.find('.replacement .size').css('font-weight', 'bold'); + } else if (replacement.size < original.size) { + conflict.find('.original .size').css('font-weight', 'bold'); + } else { + //TODO add to same size collection? + } + + //TODO show skip action for files with same size and mtime in bottom row + + }; + var selection = controller.getSelection(data.originalFiles); + if (selection.defaultAction) { + controller[selection.defaultAction](data); + } else { + var dialog_name = 'oc-dialog-fileexists-content'; + var dialog_id = '#' + dialog_name; + if (this._fileexistsshown) { + // add conflict + + var conflicts = $(dialog_id+ ' .conflicts'); + addConflict(conflicts, original, replacement); + + var title = t('files','{count} file conflicts',{count:$(dialog_id+ ' .conflict:not(.template)').length}); + $(dialog_id).parent().children('.oc-dialog-title').text(title); + + //recalculate dimensions + $(window).trigger('resize'); + + } else { + //create dialog + this._fileexistsshown = true; + $.when(this._getFileExistsTemplate()).then(function($tmpl) { + var title = t('files','One file conflict'); + var $dlg = $tmpl.octemplate({ + dialog_name: dialog_name, + title: title, + type: 'fileexists', + + why: t('files','Which files do you want to keep?'), + what: t('files','If you select both versions, the copied file will have a number added to its name.') + }); + $('body').append($dlg); + + var conflicts = $($dlg).find('.conflicts'); + addConflict(conflicts, original, replacement); + + buttonlist = [{ + text: t('core', 'Cancel'), + classes: 'cancel', + click: function(){ + self._fileexistsshown = false; + if ( typeof controller.onCancel !== 'undefined') { + controller.onCancel(data); + } + $(dialog_id).ocdialog('close'); + } + }, + { + text: t('core', 'Continue'), + classes: 'continue', + click: function(){ + self._fileexistsshown = false; + if ( typeof controller.onContinue !== 'undefined') { + controller.onContinue($(dialog_id + ' .conflict:not(.template)')); + } + $(dialog_id).ocdialog('close'); + } + }]; + + $(dialog_id).ocdialog({ + width: 500, + closeOnEscape: true, + modal: true, + buttons: buttonlist, + closeButton: null + }); + + $(dialog_id).css('height','auto'); + + //add checkbox toggling actions + $(dialog_id).find('.allnewfiles').on('click', function() { + var checkboxes = $(dialog_id).find('.conflict:not(.template) .replacement input[type="checkbox"]'); + checkboxes.prop('checked', $(this).prop('checked')); + }); + $(dialog_id).find('.allexistingfiles').on('click', function() { + var checkboxes = $(dialog_id).find('.conflict:not(.template) .original input[type="checkbox"]'); + checkboxes.prop('checked', $(this).prop('checked')); + }); + $(dialog_id).find('.conflicts').on('click', '.replacement,.original', function() { + var checkbox = $(this).find('input[type="checkbox"]'); + checkbox.prop('checked', !checkbox.prop('checked')); + }); + $(dialog_id).find('.conflicts').on('click', 'input[type="checkbox"]', function() { + var checkbox = $(this); + checkbox.prop('checked', !checkbox.prop('checked')); + }); + + //update counters + $(dialog_id).on('click', '.replacement,.allnewfiles', function() { + var count = $(dialog_id).find('.conflict:not(.template) .replacement input[type="checkbox"]:checked').length; + if (count === $(dialog_id+ ' .conflict:not(.template)').length) { + $(dialog_id).find('.allnewfiles').prop('checked', true); + $(dialog_id).find('.allnewfiles + .count').text(t('files','(all selected)')); + } else if (count > 0) { + $(dialog_id).find('.allnewfiles').prop('checked', false); + $(dialog_id).find('.allnewfiles + .count').text(t('files','({count} selected)',{count:count})); + } else { + $(dialog_id).find('.allnewfiles').prop('checked', false); + $(dialog_id).find('.allnewfiles + .count').text(''); + } + }); + $(dialog_id).on('click', '.original,.allexistingfiles', function(){ + var count = $(dialog_id).find('.conflict:not(.template) .original input[type="checkbox"]:checked').length; + if (count === $(dialog_id+ ' .conflict:not(.template)').length) { + $(dialog_id).find('.allexistingfiles').prop('checked', true); + $(dialog_id).find('.allexistingfiles + .count').text(t('files','(all selected)')); + } else if (count > 0) { + $(dialog_id).find('.allexistingfiles').prop('checked', false); + $(dialog_id).find('.allexistingfiles + .count').text(t('files','({count} selected)',{count:count})); + } else { + $(dialog_id).find('.allexistingfiles').prop('checked', false); + $(dialog_id).find('.allexistingfiles + .count').text(''); + } + }); + }) + .fail(function() { + alert(t('core', 'Error loading file exists template')); + }); + } + } + }, _getFilePickerTemplate: function() { var defer = $.Deferred(); if(!this.$filePickerTemplate) { @@ -243,6 +416,22 @@ var OCdialogs = { } return defer.promise(); }, + _getFileExistsTemplate: function () { + var defer = $.Deferred(); + if (!this.$fileexistsTemplate) { + var self = this; + $.get(OC.filePath('files', 'templates', 'fileexists.html'), function (tmpl) { + self.$fileexistsTemplate = $(tmpl); + defer.resolve(self.$fileexistsTemplate); + }) + .fail(function () { + defer.reject(); + }); + } else { + defer.resolve(this.$fileexistsTemplate); + } + return defer.promise(); + }, _getFileList: function(dir, mimeType) { return $.getJSON( OC.filePath('files', 'ajax', 'rawlist.php'), |