From 2abd663419d9caf265b66518c8066dc3f566460d Mon Sep 17 00:00:00 2001 From: Vincent Chan Date: Mon, 13 Jun 2016 22:26:49 +0200 Subject: [PATCH 1/9] update jQuery File Upload Plugin (9.12.5) to support dragleave --- apps/files/js/jquery.fileupload.js | 312 +++++++++++++++++++++-------- 1 file changed, 228 insertions(+), 84 deletions(-) diff --git a/apps/files/js/jquery.fileupload.js b/apps/files/js/jquery.fileupload.js index d7f19b1755..622161ede9 100644 --- a/apps/files/js/jquery.fileupload.js +++ b/apps/files/js/jquery.fileupload.js @@ -1,5 +1,5 @@ /* - * jQuery File Upload Plugin 5.32.2 + * jQuery File Upload Plugin 9.12.5 * https://github.com/blueimp/jQuery-File-Upload * * Copyright 2010, Sebastian Tschan @@ -9,10 +9,10 @@ * http://www.opensource.org/licenses/MIT */ -/*jslint nomen: true, unparam: true, regexp: true */ -/*global define, window, document, location, File, Blob, FormData */ +/* jshint nomen:false */ +/* global define, require, window, document, location, Blob, FormData */ -(function (factory) { +;(function (factory) { 'use strict'; if (typeof define === 'function' && define.amd) { // Register as an anonymous AMD module: @@ -20,6 +20,12 @@ 'jquery', 'jquery.ui.widget' ], factory); + } else if (typeof exports === 'object') { + // Node/CommonJS: + factory( + require('jquery'), + require('./vendor/jquery.ui.widget') + ); } else { // Browser globals: factory(window.jQuery); @@ -40,15 +46,36 @@ $('').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); + // as some Safari versions (5?) support XHR file uploads via the FormData API, + // but not non-multipart XHR file uploads. + // window.XMLHttpRequestUpload is not available on IE10, so we check for + // window.ProgressEvent instead to detect XHR2 file upload capability: + $.support.xhrFileUpload = !!(window.ProgressEvent && 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); + // Helper function to create drag handlers for dragover/dragenter/dragleave: + function getDragHandler(type) { + var isDragOver = type === 'dragover'; + return function (e) { + e.dataTransfer = e.originalEvent && e.originalEvent.dataTransfer; + var dataTransfer = e.dataTransfer; + if (dataTransfer && $.inArray('Files', dataTransfer.types) !== -1 && + this._trigger( + type, + $.Event(type, {delegatedEvent: e}) + ) !== false) { + e.preventDefault(); + if (isDragOver) { + dataTransfer.dropEffect = 'copy'; + } + } + }; + } + // 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 @@ -63,9 +90,9 @@ // The drop target element(s), by the default the complete document. // Set to null to disable drag & drop support: dropZone: $(document), - // The paste target element(s), by the default the complete document. - // Set to null to disable paste support: - pasteZone: $(document), + // The paste target element(s), by the default undefined. + // Set to a DOM node or jQuery object to enable file pasting: + pasteZone: undefined, // 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. @@ -88,6 +115,14 @@ // To limit the number of files uploaded with one XHR request, // set the following option to an integer greater than 0: limitMultiFileUploads: undefined, + // The following option limits the number of files uploaded with one + // XHR request to keep the request size under or equal to the defined + // limit in bytes: + limitMultiFileUploadSize: undefined, + // Multipart file uploads add a number of bytes to each uploaded file, + // therefore the following option adds an overhead for each file used + // in the limitMultiFileUploadSize configuration: + limitMultiFileUploadSizeOverhead: 512, // Set the following option to true to issue all file upload requests // in a sequential order: sequentialUploads: false, @@ -174,6 +209,9 @@ // handlers using jQuery's Deferred callbacks: // data.submit().done(func).fail(func).always(func); add: function (e, data) { + if (e.isDefaultPrevented()) { + return false; + } if (data.autoUpload || (data.autoUpload !== false && $(this).fileupload('option', 'autoUpload'))) { data.process().done(function () { @@ -239,7 +277,8 @@ // The following are jQuery ajax settings required for the file uploads: processData: false, contentType: false, - cache: false + cache: false, + timeout: 0 }, // A list of options that require reinitializing event listeners and/or @@ -280,7 +319,7 @@ _getFormData: function (options) { var formData; - if (typeof options.formData === 'function') { + if ($.type(options.formData) === 'function') { return options.formData(options.form); } if ($.isArray(options.formData)) { @@ -360,10 +399,18 @@ // 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); + this._trigger( + 'progress', + $.Event('progress', {delegatedEvent: e}), + data + ); // Trigger a global progress event for all current file uploads, // including ajax calls queued for sequential file uploads: - this._trigger('progressall', e, this._progress); + this._trigger( + 'progressall', + $.Event('progressall', {delegatedEvent: e}), + this._progress + ); } }, @@ -398,8 +445,9 @@ file = options.files[0], // Ignore non-multipart setting if not supported: multipart = options.multipart || !$.support.xhrFileUpload, - paramName = options.paramName[0]; - options.headers = options.headers || {}; + paramName = $.type(options.paramName) === 'array' ? + options.paramName[0] : options.paramName; + options.headers = $.extend({}, options.headers); if (options.contentRange) { options.headers['Content-Range'] = options.contentRange; } @@ -408,7 +456,7 @@ encodeURI(file.name) + '"'; } if (!multipart) { - options.contentType = file.type; + options.contentType = file.type || 'application/octet-stream'; options.data = options.blob || file; } else if ($.support.xhrFormDataFileUpload) { if (options.postMessage) { @@ -425,7 +473,8 @@ } else { $.each(options.files, function (index, file) { formData.push({ - name: options.paramName[index] || paramName, + name: ($.type(options.paramName) === 'array' && + options.paramName[index]) || paramName, value: file }); }); @@ -448,9 +497,10 @@ if (that._isInstanceOf('File', file) || that._isInstanceOf('Blob', file)) { formData.append( - options.paramName[index] || paramName, + ($.type(options.paramName) === 'array' && + options.paramName[index]) || paramName, file, - file.name + file.uploadName || file.name ); } }); @@ -534,8 +584,10 @@ 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(); + options.type = (options.type || + ($.type(options.form.prop('method')) === 'string' && + options.form.prop('method')) || '' + ).toUpperCase(); if (options.type !== 'POST' && options.type !== 'PUT' && options.type !== 'PATCH') { options.type = 'POST'; @@ -594,22 +646,32 @@ // Adds convenience methods to the data callback argument: _addConvenienceMethods: function (e, data) { var that = this, - getPromise = function (data) { - return $.Deferred().resolveWith(that, [data]).promise(); + getPromise = function (args) { + return $.Deferred().resolveWith(that, args).promise(); }; data.process = function (resolveFunc, rejectFunc) { if (resolveFunc || rejectFunc) { data._processQueue = this._processQueue = - (this._processQueue || getPromise(this)) - .pipe(resolveFunc, rejectFunc); + (this._processQueue || getPromise([this])).then( + function () { + if (data.errorThrown) { + return $.Deferred() + .rejectWith(that, [data]).promise(); + } + return getPromise(arguments); + } + ).then(resolveFunc, rejectFunc); } - return this._processQueue || getPromise(this); + 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); + (that._trigger( + 'submit', + $.Event('submit', {delegatedEvent: e}), + this + ) !== false) && that._onSend(e, this); } return this.jqXHR || that._getXHRPromise(); }; @@ -617,7 +679,9 @@ if (this.jqXHR) { return this.jqXHR.abort(); } - return that._getXHRPromise(); + this.errorThrown = 'abort'; + that._trigger('fail', null, this); + return that._getXHRPromise(false); }; data.state = function () { if (this.jqXHR) { @@ -627,6 +691,10 @@ return that._getDeferredState(this._processQueue); } }; + data.processing = function () { + return !this.jqXHR && this._processQueue && that + ._getDeferredState(this._processQueue) === 'pending'; + }; data.progress = function () { return this._progress; }; @@ -829,7 +897,11 @@ // Set timer for bitrate progress calculation: options._bitrateTimer = new that._BitrateTimer(); jqXHR = jqXHR || ( - ((aborted || that._trigger('send', e, options) === false) && + ((aborted || that._trigger( + 'send', + $.Event('send', {delegatedEvent: e}), + options + ) === false) && that._getXHRPromise(false, options.context, aborted)) || that._chunkedUpload(options) || $.ajax(options) ).done(function (result, textStatus, jqXHR) { @@ -873,9 +945,9 @@ if (this.options.limitConcurrentUploads > 1) { slot = $.Deferred(); this._slots.push(slot); - pipe = slot.pipe(send); + pipe = slot.then(send); } else { - this._sequence = this._sequence.pipe(send, send); + this._sequence = this._sequence.then(send, send); pipe = this._sequence; } // Return the piped Promise object, enhanced with an abort method, @@ -900,50 +972,93 @@ var that = this, result = true, options = $.extend({}, this.options, data), + files = data.files, + filesLength = files.length, limit = options.limitMultiFileUploads, + limitSize = options.limitMultiFileUploadSize, + overhead = options.limitMultiFileUploadSizeOverhead, + batchSize = 0, paramName = this._getParamName(options), paramNameSet, paramNameSlice, fileSet, - i; - if (!(options.singleFileUploads || limit) || + i, + j = 0; + if (!filesLength) { + return false; + } + if (limitSize && files[0].size === undefined) { + limitSize = undefined; + } + if (!(options.singleFileUploads || limit || limitSize) || !this._isXHRUpload(options)) { - fileSet = [data.files]; + fileSet = [files]; paramNameSet = [paramName]; - } else if (!options.singleFileUploads && limit) { + } else if (!(options.singleFileUploads || limitSize) && limit) { fileSet = []; paramNameSet = []; - for (i = 0; i < data.files.length; i += limit) { - fileSet.push(data.files.slice(i, i + limit)); + for (i = 0; i < filesLength; i += limit) { + fileSet.push(files.slice(i, i + limit)); paramNameSlice = paramName.slice(i, i + limit); if (!paramNameSlice.length) { paramNameSlice = paramName; } paramNameSet.push(paramNameSlice); } + } else if (!options.singleFileUploads && limitSize) { + fileSet = []; + paramNameSet = []; + for (i = 0; i < filesLength; i = i + 1) { + batchSize += files[i].size + overhead; + if (i + 1 === filesLength || + ((batchSize + files[i + 1].size + overhead) > limitSize) || + (limit && i + 1 - j >= limit)) { + fileSet.push(files.slice(j, i + 1)); + paramNameSlice = paramName.slice(j, i + 1); + if (!paramNameSlice.length) { + paramNameSlice = paramName; + } + paramNameSet.push(paramNameSlice); + j = i + 1; + batchSize = 0; + } + } } else { paramNameSet = paramName; } - data.originalFiles = data.files; - $.each(fileSet || data.files, function (index, element) { + data.originalFiles = files; + $.each(fileSet || files, function (index, element) { 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); + result = that._trigger( + 'add', + $.Event('add', {delegatedEvent: e}), + newData + ); return result; }); return result; }, - _replaceFileInput: function (input) { - var inputClone = input.clone(true); + _replaceFileInput: function (data) { + var input = data.fileInput, + inputClone = input.clone(true), + restoreFocus = input.is(document.activeElement); + // Add a reference for the new cloned file input to the data argument: + data.fileInputClone = inputClone; $('
').append(inputClone)[0].reset(); // Detaching allows to insert the fileInput on another form - // without losing the file input value: + // without loosing the file input value: input.after(inputClone).detach(); + // If the fileInput had focus before it was detached, + // restore focus to the inputClone. + if (restoreFocus) { + inputClone.focus(); + } // Avoid memory leaks with the detached file input: $.cleanData(input.unbind('remove')); // Replace the original file input element in the fileInput @@ -975,7 +1090,25 @@ // to be returned together in one set: dfd.resolve([e]); }, - dirReader; + successHandler = function (entries) { + that._handleFileTreeEntries( + entries, + path + entry.name + '/' + ).done(function (files) { + dfd.resolve(files); + }).fail(errorHandler); + }, + readEntries = function () { + dirReader.readEntries(function (results) { + if (!results.length) { + successHandler(entries); + } else { + entries = entries.concat(results); + readEntries(); + } + }, errorHandler); + }, + dirReader, entries = []; path = path || ''; if (entry.isFile) { if (entry._file) { @@ -990,14 +1123,7 @@ } } 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); + readEntries(); } else { // Return an empy list for file system items // other than files or directories: @@ -1013,7 +1139,7 @@ $.map(entries, function (entry) { return that._handleFileTreeEntry(entry, path); }) - ).pipe(function () { + ).then(function () { return Array.prototype.concat.apply( [], arguments @@ -1082,7 +1208,7 @@ return $.when.apply( $, $.map(fileInput, this._getSingleFileInputFiles) - ).pipe(function () { + ).then(function () { return Array.prototype.concat.apply( [], arguments @@ -1099,9 +1225,13 @@ this._getFileInputFiles(data.fileInput).always(function (files) { data.files = files; if (that.options.replaceFileInput) { - that._replaceFileInput(data.fileInput); + that._replaceFileInput(data); } - if (that._trigger('change', e, data) !== false) { + if (that._trigger( + 'change', + $.Event('change', {delegatedEvent: e}), + data + ) !== false) { that._onAdd(e, data); } }); @@ -1118,9 +1248,12 @@ data.files.push(file); } }); - if (this._trigger('paste', e, data) === false || - this._onAdd(e, data) === false) { - return false; + if (this._trigger( + 'paste', + $.Event('paste', {delegatedEvent: e}), + data + ) !== false) { + this._onAdd(e, data); } } }, @@ -1134,32 +1267,32 @@ e.preventDefault(); this._getDroppedFiles(dataTransfer).always(function (files) { data.files = files; - if (that._trigger('drop', e, data) !== false) { + if (that._trigger( + 'drop', + $.Event('drop', {delegatedEvent: e}), + data + ) !== false) { that._onAdd(e, data); } }); } }, - _onDragOver: function (e) { - e.dataTransfer = e.originalEvent && e.originalEvent.dataTransfer; - var dataTransfer = e.dataTransfer; - if (dataTransfer) { - if (this._trigger('dragover', e) === false) { - return false; - } - if ($.inArray('Files', dataTransfer.types) !== -1) { - dataTransfer.dropEffect = 'copy'; - e.preventDefault(); - } - } - }, + _onDragOver: getDragHandler('dragover'), + + _onDragEnter: getDragHandler('dragenter'), + + _onDragLeave: getDragHandler('dragleave'), _initEventHandlers: function () { if (this._isXHRUpload(this.options)) { this._on(this.options.dropZone, { dragover: this._onDragOver, - drop: this._onDrop + drop: this._onDrop, + // event.preventDefault() on dragenter is required for IE10+: + dragenter: this._onDragEnter, + // dragleave is not required, but added for completeness: + dragleave: this._onDragLeave }); this._on(this.options.pasteZone, { paste: this._onPaste @@ -1173,7 +1306,7 @@ }, _destroyEventHandlers: function () { - this._off(this.options.dropZone, 'dragover drop'); + this._off(this.options.dropZone, 'dragenter dragleave dragover drop'); this._off(this.options.pasteZone, 'paste'); this._off(this.options.fileInput, 'change'); }, @@ -1220,15 +1353,25 @@ _initDataAttributes: function () { var that = this, - options = this.options; + options = this.options, + data = this.element.data(); // 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); + this.element[0].attributes, + function (index, attr) { + var key = attr.name.toLowerCase(), + value; + if (/^data-/.test(key)) { + // Convert hyphen-ated key to camelCase: + key = key.slice(5).replace(/-[a-z]/g, function (str) { + return str.charAt(1).toUpperCase(); + }); + value = data[key]; + if (that._isRegExpOption(key, value)) { + value = that._getRegExp(value); + } + options[key] = value; } - options[key] = value; } ); }, @@ -1308,7 +1451,8 @@ return; } data.files = files; - jqXHR = that._onSend(null, data).then( + jqXHR = that._onSend(null, data); + jqXHR.then( function (result, textStatus, jqXHR) { dfd.resolve(result, textStatus, jqXHR); }, From 433cea30c3ffa7b314ad1f857a7ed2cf48f241e8 Mon Sep 17 00:00:00 2001 From: Vincent Chan Date: Mon, 13 Jun 2016 23:00:56 +0200 Subject: [PATCH 2/9] adds visual indication for file drag and drop --- apps/files/css/files.css | 8 ++++++++ apps/files/js/file-upload.js | 9 +++++++-- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 94eafe2752..c462e27ff1 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -68,9 +68,15 @@ } .app-files #app-content { + transition: background-color 0.3s ease; overflow-x: hidden; } +.file-drag, .file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover { + transition: background-color 0.3s ease; + background-color: rgb(179, 230, 255); +} + /* icons for sidebar */ .nav-icon-files { background-image: url('../img/folder.svg'); @@ -113,6 +119,7 @@ } #filestable tbody tr { + transition: background-color 0.3s ease; background-color: #fff; height: 40px; } @@ -125,6 +132,7 @@ #filestable tbody tr.selected, #filestable tbody tr.searchresult, table tr.mouseOver td { + transition: background-color 0.3s ease; background-color: #f8f8f8; } tbody a { color:#000; } diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index 3257ded7b8..eadb57d914 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -494,7 +494,7 @@ OC.Upload = { * @param {object} e * @param {object} data */ - done:function(e, data) { + done: function(e, data) { OC.Upload.log('done', e, data); // handle different responses (json or body from iframe for ie) var response; @@ -667,7 +667,12 @@ OC.Upload = { OC.Upload._hideProgressBar(); } }); - + fileupload.on('fileuploaddragover', function(){ + $('#app-content').addClass('file-drag'); + }); + fileupload.on('fileuploaddragleave fileuploaddrop', function (){ + $('#app-content').removeClass('file-drag'); + }); } else { // for all browsers that don't support the progress bar // IE 8 & 9 From 864c3a8fbbe221d7ded83093a2e7c5bde097ef8c Mon Sep 17 00:00:00 2001 From: Vincent Chan Date: Tue, 14 Jun 2016 09:58:03 +0200 Subject: [PATCH 3/9] fixes direct upload to folder --- apps/files/js/jquery.fileupload.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/apps/files/js/jquery.fileupload.js b/apps/files/js/jquery.fileupload.js index 622161ede9..e903343700 100644 --- a/apps/files/js/jquery.fileupload.js +++ b/apps/files/js/jquery.fileupload.js @@ -1267,11 +1267,7 @@ e.preventDefault(); this._getDroppedFiles(dataTransfer).always(function (files) { data.files = files; - if (that._trigger( - 'drop', - $.Event('drop', {delegatedEvent: e}), - data - ) !== false) { + if (that._trigger('drop', e, data) !== false) { that._onAdd(e, data); } }); From 937d21ed29f29f424aaed7abb643a210ccb2453b Mon Sep 17 00:00:00 2001 From: Vincent Chan Date: Tue, 14 Jun 2016 11:51:03 +0200 Subject: [PATCH 4/9] properly fix folder upload to use delegatedEvent --- apps/files/js/filelist.js | 10 +++++++--- apps/files/js/jquery.fileupload.js | 6 +++++- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index f249f2d35c..4b1c07b297 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -2514,12 +2514,13 @@ var self = this; // handle upload events - var fileUploadStart = this.$el.find('#file_upload_start'); + var fileUploadStart = this.$el; + var delegatedElement = '#file_upload_start'; // detect the progress bar resize fileUploadStart.on('resized', this._onResize); - fileUploadStart.on('fileuploaddrop', function(e, data) { + fileUploadStart.on('fileuploaddrop', delegatedElement, function(e, data) { OC.Upload.log('filelist handle fileuploaddrop', e, data); if (self.$el.hasClass('hidden')) { @@ -2527,7 +2528,10 @@ return false; } - var dropTarget = $(e.originalEvent.target); + console.log(e); + var dropTarget = $(e.delegatedEvent.target); + console.log(dropTarget); + // check if dropped inside this container and not another one if (dropTarget.length && !self.$el.is(dropTarget) // dropped on list directly diff --git a/apps/files/js/jquery.fileupload.js b/apps/files/js/jquery.fileupload.js index e903343700..622161ede9 100644 --- a/apps/files/js/jquery.fileupload.js +++ b/apps/files/js/jquery.fileupload.js @@ -1267,7 +1267,11 @@ e.preventDefault(); this._getDroppedFiles(dataTransfer).always(function (files) { data.files = files; - if (that._trigger('drop', e, data) !== false) { + if (that._trigger( + 'drop', + $.Event('drop', {delegatedEvent: e}), + data + ) !== false) { that._onAdd(e, data); } }); From 203a07e7f35aeef8e22385b0a9fec216387430e4 Mon Sep 17 00:00:00 2001 From: Vincent Chan Date: Wed, 15 Jun 2016 01:03:59 +0200 Subject: [PATCH 5/9] change folder icon when dragging over a directory --- apps/files/css/files.css | 4 ++++ apps/files/js/file-upload.js | 15 +++++++++++++-- apps/files/js/filelist.js | 2 -- 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/apps/files/css/files.css b/apps/files/css/files.css index c462e27ff1..980332d781 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -77,6 +77,10 @@ background-color: rgb(179, 230, 255); } +.dropping-to-dir .thumbnail { + background-image: url(/nextcloud/core/img/filetypes/folder-drag-accept.svg)!important; +} + /* icons for sidebar */ .nav-icon-files { background-image: url('../img/folder.svg'); diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index eadb57d914..dbf08ac10b 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -667,11 +667,22 @@ OC.Upload = { OC.Upload._hideProgressBar(); } }); - fileupload.on('fileuploaddragover', function(){ + fileupload.on('fileuploaddragover', function(e, data){ $('#app-content').addClass('file-drag'); + + var filerow = $(e.delegatedEvent.target).closest('tr'); + + if(!filerow.hasClass('dropping-to-dir')){ + $('.dropping-to-dir').removeClass('dropping-to-dir'); + } + + if(filerow.attr('data-type') === 'dir'){ + filerow.addClass('dropping-to-dir'); + } }); - fileupload.on('fileuploaddragleave fileuploaddrop', function (){ + fileupload.on('fileuploaddragleave fileuploaddrop', function (e, data){ $('#app-content').removeClass('file-drag'); + $('.dropping-to-dir').removeClass('dropping-to-dir'); }); } else { // for all browsers that don't support the progress bar diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 4b1c07b297..3ab5032599 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -2528,9 +2528,7 @@ return false; } - console.log(e); var dropTarget = $(e.delegatedEvent.target); - console.log(dropTarget); // check if dropped inside this container and not another one if (dropTarget.length From 62144209747760505aa82526cb050aea2a9f8881 Mon Sep 17 00:00:00 2001 From: Vincent Chan Date: Wed, 15 Jun 2016 09:45:36 +0200 Subject: [PATCH 6/9] restrict dropZone to app-content div --- apps/files/js/file-upload.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index dbf08ac10b..3d0385f08a 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -273,7 +273,7 @@ OC.Upload = { var self = this; if ( $('#file_upload_start').exists() ) { var file_upload_param = { - dropZone: $('#content'), // restrict dropZone to content div + dropZone: $('#app-content'), // restrict dropZone to app-content div pasteZone: null, autoUpload: false, sequentialUploads: true, From aecdcf737f30c8a621576d2843a50aac3815d1ab Mon Sep 17 00:00:00 2001 From: Vincent Chan Date: Wed, 15 Jun 2016 11:28:53 +0200 Subject: [PATCH 7/9] dragging over folder will highlight folder only --- apps/files/css/files.css | 8 ++++++++ apps/files/js/file-upload.js | 3 +++ 2 files changed, 11 insertions(+) diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 980332d781..bb177db752 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -77,6 +77,14 @@ background-color: rgb(179, 230, 255); } +.app-files #app-content.dir-drop, .file-drag #filestable tbody tr{ + background-color: rgba(0, 0, 0, 0); +} + +.app-files #app-content.dir-drop #filestable tbody tr.dropping-to-dir{ + background-color: rgb(179, 230, 255); +} + .dropping-to-dir .thumbnail { background-image: url(/nextcloud/core/img/filetypes/folder-drag-accept.svg)!important; } diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index 3d0385f08a..d53ce1bd7e 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -674,15 +674,18 @@ OC.Upload = { if(!filerow.hasClass('dropping-to-dir')){ $('.dropping-to-dir').removeClass('dropping-to-dir'); + $('.dir-drop').removeClass('dir-drop'); } if(filerow.attr('data-type') === 'dir'){ + $('#app-content').addClass('dir-drop'); filerow.addClass('dropping-to-dir'); } }); fileupload.on('fileuploaddragleave fileuploaddrop', function (e, data){ $('#app-content').removeClass('file-drag'); $('.dropping-to-dir').removeClass('dropping-to-dir'); + $('.dir-drop').removeClass('dir-drop'); }); } else { // for all browsers that don't support the progress bar From 5315a479f35f0b9fedcbb18a8a0272c16b5ea16d Mon Sep 17 00:00:00 2001 From: Vincent Chan Date: Wed, 15 Jun 2016 13:11:25 +0200 Subject: [PATCH 8/9] fixes responsive/mobile view --- apps/files/css/files.css | 10 +++++----- apps/files/css/mobile.css | 4 ++++ 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/apps/files/css/files.css b/apps/files/css/files.css index bb177db752..ccf91e377c 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -73,16 +73,16 @@ } .file-drag, .file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover { - transition: background-color 0.3s ease; - background-color: rgb(179, 230, 255); + transition: background-color 0.3s ease!important; + background-color: rgb(179, 230, 255)!important; } -.app-files #app-content.dir-drop, .file-drag #filestable tbody tr{ - background-color: rgba(0, 0, 0, 0); +.app-files #app-content.dir-drop, .file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover{ + background-color: rgba(0, 0, 0, 0)!important; } .app-files #app-content.dir-drop #filestable tbody tr.dropping-to-dir{ - background-color: rgb(179, 230, 255); + background-color: rgb(179, 230, 255)!important; } .dropping-to-dir .thumbnail { diff --git a/apps/files/css/mobile.css b/apps/files/css/mobile.css index bb20c8c3f7..10a9a57332 100644 --- a/apps/files/css/mobile.css +++ b/apps/files/css/mobile.css @@ -1,5 +1,9 @@ @media only screen and (max-width: 768px) { +.app-files #app-content.dir-drop{ + background-color: rgba(255, 255, 255, 1)!important; +} + /* don’t require a minimum width for files table */ #body-user #filestable { min-width: initial !important; From 10f8d643dc44ddf82db3cfd91d529d47cfe2d94d Mon Sep 17 00:00:00 2001 From: Vincent Chan Date: Wed, 15 Jun 2016 13:16:11 +0200 Subject: [PATCH 9/9] store icons in class --- apps/files/css/files.css | 4 ---- apps/files/js/file-upload.js | 7 +++++-- core/css/icons.css | 4 ++++ 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/apps/files/css/files.css b/apps/files/css/files.css index ccf91e377c..f8a2d17aaf 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -85,10 +85,6 @@ background-color: rgb(179, 230, 255)!important; } -.dropping-to-dir .thumbnail { - background-image: url(/nextcloud/core/img/filetypes/folder-drag-accept.svg)!important; -} - /* icons for sidebar */ .nav-icon-files { background-image: url('../img/folder.svg'); diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index d53ce1bd7e..2453cc5207 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -667,7 +667,7 @@ OC.Upload = { OC.Upload._hideProgressBar(); } }); - fileupload.on('fileuploaddragover', function(e, data){ + fileupload.on('fileuploaddragover', function(e){ $('#app-content').addClass('file-drag'); var filerow = $(e.delegatedEvent.target).closest('tr'); @@ -675,17 +675,20 @@ OC.Upload = { if(!filerow.hasClass('dropping-to-dir')){ $('.dropping-to-dir').removeClass('dropping-to-dir'); $('.dir-drop').removeClass('dir-drop'); + $('.icon-filetype-folder-drag-accept').removeClass('icon-filetype-folder-drag-accept'); } if(filerow.attr('data-type') === 'dir'){ $('#app-content').addClass('dir-drop'); filerow.addClass('dropping-to-dir'); + filerow.find('.thumbnail').addClass('icon-filetype-folder-drag-accept'); } }); - fileupload.on('fileuploaddragleave fileuploaddrop', function (e, data){ + fileupload.on('fileuploaddragleave fileuploaddrop', function (){ $('#app-content').removeClass('file-drag'); $('.dropping-to-dir').removeClass('dropping-to-dir'); $('.dir-drop').removeClass('dir-drop'); + $('.icon-filetype-folder-drag-accept').removeClass('icon-filetype-folder-drag-accept'); }); } else { // for all browsers that don't support the progress bar diff --git a/core/css/icons.css b/core/css/icons.css index 8bf4c204c9..89d974c49b 100644 --- a/core/css/icons.css +++ b/core/css/icons.css @@ -353,6 +353,10 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- background-image: url('../img/filetypes/folder.svg'); } +.icon-filetype-folder-drag-accept { + background-image: url('../img/filetypes/folder-drag-accept.svg')!important; +} + .icon-home { background-image: url('../img/places/home.svg'); }