From 8d7448594cb00e995bed9b6e6db6e7f9280da24d Mon Sep 17 00:00:00 2001 From: Kate Arzamastseva Date: Sun, 7 Aug 2011 13:54:36 +0300 Subject: issue #44 fileuploader specific changes made in inheriting class --- lib/scripts/fileuploader.js | 64 +--------- lib/scripts/fileuploaderextended.js | 230 ++++++++++++++++++++++++++++++++++++ lib/scripts/media.js | 2 +- 3 files changed, 234 insertions(+), 62 deletions(-) create mode 100644 lib/scripts/fileuploaderextended.js (limited to 'lib/scripts') diff --git a/lib/scripts/fileuploader.js b/lib/scripts/fileuploader.js index 437984848..5368d9739 100644 --- a/lib/scripts/fileuploader.js +++ b/lib/scripts/fileuploader.js @@ -267,7 +267,6 @@ qq.FileUploaderBasic = function(o){ onProgress: function(id, fileName, loaded, total){}, onComplete: function(id, fileName, responseJSON){}, onCancel: function(id, fileName){}, - onUpload: function(){}, // messages messages: { typeError: "{file} has invalid extension. Only {extensions} are allowed.", @@ -336,9 +335,6 @@ qq.FileUploaderBasic.prototype = { onCancel: function(id, fileName){ self._onCancel(id, fileName); self._options.onCancel(id, fileName); - }, - onUpload: function(){ - self._onUpload(); } }); @@ -371,9 +367,6 @@ qq.FileUploaderBasic.prototype = { _onCancel: function(id, fileName){ this._filesInProgress--; }, - _onUpload: function(){ - this._handler.uploadAll(this._options.params); - }, _onInputChange: function(input){ if (this._handler instanceof qq.UploadHandlerXhr){ this._uploadFileList(input.files); @@ -401,6 +394,7 @@ qq.FileUploaderBasic.prototype = { if (this._options.onSubmit(id, fileName) !== false){ this._onSubmit(id, fileName); + this._handler.upload(id, this._options.params); } }, _validateFile: function(file){ @@ -494,13 +488,11 @@ qq.FileUploader = function(o){ '
Drop files here to upload
' + '
Upload a file
' + '' + - '' + '', // template for one item in file list fileTemplate: '
  • ' + '' + - '' + '' + '' + 'Cancel' + @@ -513,9 +505,8 @@ qq.FileUploader = function(o){ drop: 'qq-upload-drop-area', dropActive: 'qq-upload-drop-area-active', list: 'qq-upload-list', - nameInput: 'qq-upload-name-input', - file: 'qq-upload-file', + file: 'qq-upload-file', spinner: 'qq-upload-spinner', size: 'qq-upload-size', cancel: 'qq-upload-cancel', @@ -538,7 +529,6 @@ qq.FileUploader = function(o){ this._button = this._createUploadButton(this._find(this._element, 'button')); this._bindCancelEvent(); - this._bindUploadEvent(); this._setupDragDrop(); }; @@ -639,10 +629,6 @@ qq.extend(qq.FileUploader.prototype, { qq.setText(fileElement, this._formatFileName(fileName)); this._find(item, 'size').style.display = 'none'; - var nameElement = this._find(item, 'nameInput'); - nameElement.value = this._formatFileName(fileName); - nameElement.id = id; - this._listElement.appendChild(item); }, _getItemByFileId: function(id){ @@ -674,19 +660,6 @@ qq.extend(qq.FileUploader.prototype, { qq.remove(item); } }); - }, - - _bindUploadEvent: function(){ - var self = this, - list = this._listElement; - - qq.attach(document.getElementById('mediamanager__upload_button'), 'click', function(e){ - e = e || window.event; - var target = e.target || e.srcElement; - qq.preventDefault(e); - self._handler._options.onUpload(); - - }); } }); @@ -904,10 +877,6 @@ qq.UploadHandlerAbstract.prototype = { * @returns id **/ add: function(file){}, - - uploadAll: function(params){ - this._uploadAll(params); - }, /** * Sends the file identified by id and additional query params to the server */ @@ -958,8 +927,6 @@ qq.UploadHandlerAbstract.prototype = { * Actual upload method */ _upload: function(id){}, - - _uploadAll: function(params){}, /** * Actual cancel method */ @@ -1059,12 +1026,6 @@ qq.extend(qq.UploadHandlerForm.prototype, { return id; }, - _uploadAll: function(params){ - for (key in this._inputs) { - this.upload(key, params); - } - - }, _attachLoadEvent: function(iframe, callback){ qq.attach(iframe, 'load', function(){ // when we remove iframe from dom @@ -1192,21 +1153,10 @@ qq.extend(qq.UploadHandlerXhr.prototype, { getName: function(id){ var file = this._files[id]; // fix missing name in Safari 4 - var name = document.getElementById(id); - if (name != null) { - return name.value; - } else { - if (file != null) { - // fix missing name in Safari 4 - return file.fileName != null ? file.fileName : file.name; - } else { - return null; - } - } + return file.fileName != null ? file.fileName : file.name; }, getSize: function(id){ var file = this._files[id]; - if (file == null) return null; return file.fileSize != null ? file.fileSize : file.size; }, /** @@ -1223,7 +1173,6 @@ qq.extend(qq.UploadHandlerXhr.prototype, { var file = this._files[id], name = this.getName(id), size = this.getSize(id); - if (name == null || size == null) return; this._loaded[id] = 0; @@ -1254,13 +1203,6 @@ qq.extend(qq.UploadHandlerXhr.prototype, { xhr.setRequestHeader("Content-Type", "application/octet-stream"); xhr.send(file); }, - - _uploadAll: function(params){ - for (key in this._files) { - this.upload(key, params); - } - - }, _onComplete: function(id, xhr){ // the request was aborted/cancelled if (!this._files[id]) return; diff --git a/lib/scripts/fileuploaderextended.js b/lib/scripts/fileuploaderextended.js new file mode 100644 index 000000000..ba9158ea1 --- /dev/null +++ b/lib/scripts/fileuploaderextended.js @@ -0,0 +1,230 @@ +qq.extend(qq.FileUploader.prototype, { + _createUploadHandler: function(){ + var self = this, + handlerClass; + + if(qq.UploadHandlerXhr.isSupported()){ + handlerClass = 'UploadHandlerXhr'; + //handlerClass = 'UploadHandlerForm'; + } else { + handlerClass = 'UploadHandlerForm'; + } + + var handler = new qq[handlerClass]({ + debug: this._options.debug, + action: this._options.action, + maxConnections: this._options.maxConnections, + onProgress: function(id, fileName, loaded, total){ + self._onProgress(id, fileName, loaded, total); + self._options.onProgress(id, fileName, loaded, total); + }, + onComplete: function(id, fileName, result){ + self._onComplete(id, fileName, result); + self._options.onComplete(id, fileName, result); + }, + onCancel: function(id, fileName){ + self._onCancel(id, fileName); + self._options.onCancel(id, fileName); + }, + onUpload: function(){ + self._onUpload(); + } + }); + + return handler; + }, + + _onUpload: function(){ + this._handler.uploadAll(this._options.params); + }, + + _uploadFile: function(fileContainer){ + var id = this._handler.add(fileContainer); + var fileName = this._handler.getName(id); + + if (this._options.onSubmit(id, fileName) !== false){ + this._onSubmit(id, fileName); + } + }, + + _addToList: function(id, fileName){ + var item = qq.toElement(this._options.fileTemplate); + item.qqFileId = id; + + var fileElement = this._find(item, 'file'); + qq.setText(fileElement, this._formatFileName(fileName)); + this._find(item, 'size').style.display = 'none'; + + var nameElement = this._find(item, 'nameInput'); + nameElement.value = this._formatFileName(fileName); + nameElement.id = id; + + this._listElement.appendChild(item); + } + +}); + +qq.FileUploaderExtended = function(o){ + // call parent constructor + qq.FileUploaderBasic.apply(this, arguments); + + qq.extend(this._options, { + element: null, + // if set, will be used instead of qq-upload-list in template + listElement: null, + + template: '
    ' + + '
    Drop files here to upload
    ' + + '
    Upload a file
    ' + + '
      ' + + '' + + '
      ', + + // template for one item in file list + fileTemplate: '
    • ' + + '' + + '' + + '' + + '' + + 'Cancel' + + 'Failed' + + '
      • ', + + classes: { + // used to get elements from templates + button: 'qq-upload-button', + drop: 'qq-upload-drop-area', + dropActive: 'qq-upload-drop-area-active', + list: 'qq-upload-list', + nameInput: 'qq-upload-name-input', + file: 'qq-upload-file', + + spinner: 'qq-upload-spinner', + size: 'qq-upload-size', + cancel: 'qq-upload-cancel', + + // added to list item when upload completes + // used in css to hide progress spinner + success: 'qq-upload-success', + fail: 'qq-upload-fail' + } + }); + + qq.extend(this._options, o); + + this._element = this._options.element; + this._element.innerHTML = this._options.template; + this._listElement = this._options.listElement || this._find(this._element, 'list'); + + this._classes = this._options.classes; + + this._button = this._createUploadButton(this._find(this._element, 'button')); + + this._bindCancelEvent(); + this._bindUploadEvent(); + this._setupDragDrop(); +}; + +qq.extend(qq.FileUploaderExtended.prototype, qq.FileUploader.prototype); + +qq.extend(qq.FileUploaderExtended.prototype, { + _bindUploadEvent: function(){ + var self = this, + list = this._listElement; + + qq.attach(document.getElementById('mediamanager__upload_button'), 'click', function(e){ + e = e || window.event; + var target = e.target || e.srcElement; + qq.preventDefault(e); + self._handler._options.onUpload(); + + }); + } + +}); + +qq.extend(qq.UploadHandlerForm.prototype, { + uploadAll: function(params){ + this._uploadAll(params); + }, + + _uploadAll: function(params){ + for (key in this._inputs) { + this.upload(key, params); + } + + } +}); + +qq.extend(qq.UploadHandlerXhr.prototype, { + uploadAll: function(params){ + this._uploadAll(params); + }, + + getName: function(id){ + var file = this._files[id]; + var name = document.getElementById(id); + if (name != null) { + return name.value; + } else { + if (file != null) { + // fix missing name in Safari 4 + return file.fileName != null ? file.fileName : file.name; + } else { + return null; + } + } + }, + + getSize: function(id){ + var file = this._files[id]; + if (file == null) return null; + return file.fileSize != null ? file.fileSize : file.size; + }, + + _upload: function(id, params){ + var file = this._files[id], + name = this.getName(id), + size = this.getSize(id); + if (name == null || size == null) return; + + this._loaded[id] = 0; + + var xhr = this._xhrs[id] = new XMLHttpRequest(); + var self = this; + + xhr.upload.onprogress = function(e){ + if (e.lengthComputable){ + self._loaded[id] = e.loaded; + self._options.onProgress(id, name, e.loaded, e.total); + } + }; + + xhr.onreadystatechange = function(){ + if (xhr.readyState == 4){ + self._onComplete(id, xhr); + } + }; + + // build query string + params = params || {}; + params['qqfile'] = name; + var queryString = qq.obj2url(params, this._options.action); + + xhr.open("POST", queryString, true); + xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); + xhr.setRequestHeader("X-File-Name", encodeURIComponent(name)); + xhr.setRequestHeader("Content-Type", "application/octet-stream"); + xhr.send(file); + }, + + _uploadAll: function(params){ + jQuery(".qq-upload-spinner-hidden").each(function (i) { + jQuery(this).addClass('qq-upload-spinner'); + }); + for (key in this._files) { + this.upload(key, params); + } + + } +}); diff --git a/lib/scripts/media.js b/lib/scripts/media.js index 26eb43fc3..5ba3b38be 100644 --- a/lib/scripts/media.js +++ b/lib/scripts/media.js @@ -950,7 +950,7 @@ function createUploader(){ var params = dw_mediamanager.form_params(jQuery('#dw__upload'))+'&call=mediaupload'; params = getUrlVars(params); - var uploader = new qq.FileUploader({ + var uploader = new qq.FileUploaderExtended({ element: document.getElementById('mediamanager__uploader'), action: DOKU_BASE + 'lib/exe/ajax.php', params: params -- cgit v1.2.3