1qq.extend(qq.FileUploader.prototype, { 2 _createUploadHandler: function(){ 3 var self = this, 4 handlerClass; 5 6 if(qq.UploadHandlerXhr.isSupported()){ 7 handlerClass = 'UploadHandlerXhr'; 8 //handlerClass = 'UploadHandlerForm'; 9 } else { 10 handlerClass = 'UploadHandlerForm'; 11 } 12 13 var handler = new qq[handlerClass]({ 14 debug: this._options.debug, 15 action: this._options.action, 16 maxConnections: this._options.maxConnections, 17 onProgress: function(id, fileName, loaded, total){ 18 self._onProgress(id, fileName, loaded, total); 19 self._options.onProgress(id, fileName, loaded, total); 20 }, 21 onComplete: function(id, fileName, result){ 22 self._onComplete(id, fileName, result); 23 self._options.onComplete(id, fileName, result); 24 }, 25 onCancel: function(id, fileName){ 26 self._onCancel(id, fileName); 27 self._options.onCancel(id, fileName); 28 }, 29 onUpload: function(){ 30 self._onUpload(); 31 } 32 }); 33 34 return handler; 35 }, 36 37 _onUpload: function(){ 38 this._handler.uploadAll(this._options.params); 39 }, 40 41 _uploadFile: function(fileContainer){ 42 var id = this._handler.add(fileContainer); 43 var fileName = this._handler.getName(id); 44 45 if (this._options.onSubmit(id, fileName) !== false){ 46 this._onSubmit(id, fileName); 47 } 48 }, 49 50 _addToList: function(id, fileName){ 51 var item = qq.toElement(this._options.fileTemplate); 52 item.qqFileId = id; 53 54 var fileElement = this._find(item, 'file'); 55 qq.setText(fileElement, fileName); 56 this._find(item, 'size').style.display = 'none'; 57 58 var nameElement = this._find(item, 'nameInput'); 59 fileName = fileName.toLowerCase(); 60 fileName = fileName.replace(/([^a-z0-9_\.\-]+)/g, '_'); 61 nameElement.value = fileName; 62 nameElement.id = 'mediamanager__upload_item'+id; 63 64 this._listElement.appendChild(item); 65 } 66 67}); 68 69qq.FileUploaderExtended = function(o){ 70 // call parent constructor 71 qq.FileUploaderBasic.apply(this, arguments); 72 73 qq.extend(this._options, { 74 element: null, 75 // if set, will be used instead of qq-upload-list in template 76 listElement: null, 77 78 template: '<div class="qq-uploader">' + 79 '<div class="qq-upload-drop-area"><span>' + LANG.media_drop + '</span></div>' + 80 '<div class="qq-upload-button">' + LANG.media_select + '</div>' + 81 '<ul class="qq-upload-list"></ul>' + 82 '<div class="qq-action-container">' + 83 ' <input class="qq-upload-action button" type="submit" value="' + LANG.media_upload_btn + '" id="mediamanager__upload_button">' + 84 ' <label class="qq-overwrite-check"><input type="checkbox" value="1" name="ow" class="dw__ow"> <span>' + LANG.media_overwrt + '</span></label>' + 85 '</div>' + 86 '</div>', 87 88 // template for one item in file list 89 fileTemplate: '<li>' + 90 '<span class="qq-upload-file hidden"></span>' + 91 ' <input class="qq-upload-name-input edit" type="text" value="" />' + 92 ' <span class="qq-upload-spinner hidden"></span>' + 93 ' <span class="qq-upload-size"></span>' + 94 ' <a class="qq-upload-cancel" href="#">' + LANG.media_cancel + '</a>' + 95 ' <span class="qq-upload-failed-text error">Failed</span>' + 96 '</li>', 97 98 classes: { 99 // used to get elements from templates 100 button: 'qq-upload-button', 101 drop: 'qq-upload-drop-area', 102 dropActive: 'qq-upload-drop-area-active', 103 list: 'qq-upload-list', 104 nameInput: 'qq-upload-name-input', 105 overwriteInput: 'qq-overwrite-check', 106 uploadButton: 'qq-upload-action', 107 file: 'qq-upload-file', 108 109 spinner: 'qq-upload-spinner', 110 size: 'qq-upload-size', 111 cancel: 'qq-upload-cancel', 112 113 // added to list item when upload completes 114 // used in css to hide progress spinner 115 success: 'qq-upload-success', 116 fail: 'qq-upload-fail', 117 failedText: 'qq-upload-failed-text' 118 } 119 }); 120 121 qq.extend(this._options, o); 122 123 this._element = this._options.element; 124 this._element.innerHTML = this._options.template; 125 this._listElement = this._options.listElement || this._find(this._element, 'list'); 126 127 this._classes = this._options.classes; 128 129 this._button = this._createUploadButton(this._find(this._element, 'button')); 130 131 this._bindCancelEvent(); 132 this._bindUploadEvent(); 133 this._setupDragDrop(); 134}; 135 136qq.extend(qq.FileUploaderExtended.prototype, qq.FileUploader.prototype); 137 138qq.extend(qq.FileUploaderExtended.prototype, { 139 _bindUploadEvent: function(){ 140 var self = this, 141 list = this._listElement; 142 143 qq.attach(document.getElementById('mediamanager__upload_button'), 'click', function(e){ 144 e = e || window.event; 145 var target = e.target || e.srcElement; 146 qq.preventDefault(e); 147 self._handler._options.onUpload(); 148 149 jQuery(".qq-upload-name-input").each(function (i) { 150 jQuery(this).attr('disabled', 'disabled'); 151 }); 152 }); 153 }, 154 155 _onComplete: function(id, fileName, result){ 156 this._filesInProgress--; 157 158 // mark completed 159 var item = this._getItemByFileId(id); 160 qq.remove(this._find(item, 'cancel')); 161 qq.remove(this._find(item, 'spinner')); 162 163 var nameInput = this._find(item, 'nameInput'); 164 var fileElement = this._find(item, 'file'); 165 qq.setText(fileElement, nameInput.value); 166 qq.removeClass(fileElement, 'hidden'); 167 qq.remove(nameInput); 168 jQuery('.qq-upload-button, #mediamanager__upload_button').remove(); 169 jQuery('.dw__ow').parent().hide(); 170 jQuery('.qq-upload-drop-area').remove(); 171 172 if (result.success){ 173 qq.addClass(item, this._classes.success); 174 $link = '<a href="' + result.link + '" name="h_:' + result.id + '" class="select">' + nameInput.value + '</a>'; 175 jQuery(fileElement).html($link); 176 177 } else { 178 qq.addClass(item, this._classes.fail); 179 var fail = this._find(item, 'failedText'); 180 if (result.error) qq.setText(fail, result.error); 181 } 182 183 if (document.getElementById('media__content') && !document.getElementById('mediamanager__done_form')) { 184 var action = document.location.href; 185 var i = action.indexOf('?'); 186 if (i) action = action.substr(0, i); 187 var button = '<form method="post" action="' + action + '" id="mediamanager__done_form"><div>'; 188 button += '<input type="hidden" value="' + result.ns + '" name="ns">'; 189 button += '<input class="button" type="submit" value="' + LANG.media_done_btn + '"></div></form>'; 190 jQuery('#mediamanager__uploader').append(button); 191 } 192 } 193 194}); 195 196qq.extend(qq.UploadHandlerForm.prototype, { 197 uploadAll: function(params){ 198 this._uploadAll(params); 199 }, 200 201 getName: function(id){ 202 var file = this._inputs[id]; 203 var name = document.getElementById('mediamanager__upload_item'+id); 204 if (name != null) { 205 return name.value; 206 } else { 207 if (file != null) { 208 // get input value and remove path to normalize 209 return file.value.replace(/.*(\/|\\)/, ""); 210 } else { 211 return null; 212 } 213 } 214 }, 215 216 _uploadAll: function(params){ 217 jQuery(".qq-upload-spinner").each(function (i) { 218 jQuery(this).removeClass('hidden'); 219 }); 220 for (key in this._inputs) { 221 this.upload(key, params); 222 } 223 224 }, 225 226 _upload: function(id, params){ 227 var input = this._inputs[id]; 228 229 if (!input){ 230 throw new Error('file with passed id was not added, or already uploaded or cancelled'); 231 } 232 233 var fileName = this.getName(id); 234 235 var iframe = this._createIframe(id); 236 var form = this._createForm(iframe, params); 237 form.appendChild(input); 238 239 var nameInput = qq.toElement('<input name="mediaid" value="' + fileName + '" type="text">'); 240 form.appendChild(nameInput); 241 242 var checked = jQuery('.dw__ow').attr('checked'); 243 var owCheckbox = jQuery('.dw__ow').clone(); 244 owCheckbox.attr('checked', checked); 245 jQuery(form).append(owCheckbox); 246 247 var self = this; 248 this._attachLoadEvent(iframe, function(){ 249 self.log('iframe loaded'); 250 251 var response = self._getIframeContentJSON(iframe); 252 253 self._options.onComplete(id, fileName, response); 254 self._dequeue(id); 255 256 delete self._inputs[id]; 257 // timeout added to fix busy state in FF3.6 258 setTimeout(function(){ 259 qq.remove(iframe); 260 }, 1); 261 }); 262 263 form.submit(); 264 qq.remove(form); 265 266 return id; 267 } 268}); 269 270qq.extend(qq.UploadHandlerXhr.prototype, { 271 uploadAll: function(params){ 272 this._uploadAll(params); 273 }, 274 275 getName: function(id){ 276 var file = this._files[id]; 277 var name = document.getElementById('mediamanager__upload_item'+id); 278 if (name != null) { 279 return name.value; 280 } else { 281 if (file != null) { 282 // fix missing name in Safari 4 283 return file.fileName != null ? file.fileName : file.name; 284 } else { 285 return null; 286 } 287 } 288 }, 289 290 getSize: function(id){ 291 var file = this._files[id]; 292 if (file == null) return null; 293 return file.fileSize != null ? file.fileSize : file.size; 294 }, 295 296 _upload: function(id, params){ 297 var file = this._files[id], 298 name = this.getName(id), 299 size = this.getSize(id); 300 if (name == null || size == null) return; 301 302 this._loaded[id] = 0; 303 304 var xhr = this._xhrs[id] = new XMLHttpRequest(); 305 var self = this; 306 307 xhr.upload.onprogress = function(e){ 308 if (e.lengthComputable){ 309 self._loaded[id] = e.loaded; 310 self._options.onProgress(id, name, e.loaded, e.total); 311 } 312 }; 313 314 xhr.onreadystatechange = function(){ 315 if (xhr.readyState == 4){ 316 self._onComplete(id, xhr); 317 } 318 }; 319 320 // build query string 321 params = params || {}; 322 params['qqfile'] = name; 323 params['ow'] = jQuery('.dw__ow').attr('checked'); 324 var queryString = qq.obj2url(params, this._options.action); 325 326 xhr.open("POST", queryString, true); 327 xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 328 xhr.setRequestHeader("X-File-Name", encodeURIComponent(name)); 329 xhr.setRequestHeader("Content-Type", "application/octet-stream"); 330 xhr.send(file); 331 }, 332 333 _uploadAll: function(params){ 334 jQuery(".qq-upload-spinner").each(function (i) { 335 jQuery(this).removeClass('hidden'); 336 }); 337 for (key in this._files) { 338 this.upload(key, params); 339 } 340 341 } 342}); 343