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 '<div class="qq-upload-list"></div>' + 82 '<div><input class="button" type="submit" value="' + LANG.media_upload_btn + '" id="mediamanager__upload_button">' + 83 '<label class="check"><input class="dw__ow" type="checkbox" value="1" name="ow"><span>' + LANG.media_overwrt + '</span></label>' + 84 '</div>' + 85 '</div>', 86 87 // template for one item in file list 88 fileTemplate: '<div class="li">' + 89 '<span class="qq-upload-file qq-upload-file-hidden"></span>' + 90 '<input class="qq-upload-name-input edit" type="text">' + 91 '<span class="qq-upload-spinner-hidden"></span>' + 92 '<span class="qq-upload-size"></span>' + 93 '<a class="qq-upload-cancel" href="#">' + LANG.media_cancel + '</a>' + 94 '<span class="qq-upload-failed-text">Failed</span>' + 95 '</div>', 96 97 classes: { 98 // used to get elements from templates 99 button: 'qq-upload-button', 100 drop: 'qq-upload-drop-area', 101 dropActive: 'qq-upload-drop-area-active', 102 list: 'qq-upload-list', 103 nameInput: 'qq-upload-name-input', 104 file: 'qq-upload-file', 105 106 spinner: 'qq-upload-spinner', 107 size: 'qq-upload-size', 108 cancel: 'qq-upload-cancel', 109 110 // added to list item when upload completes 111 // used in css to hide progress spinner 112 success: 'qq-upload-success', 113 fail: 'qq-upload-fail', 114 failedText : 'qq-upload-failed-text' 115 } 116 }); 117 118 qq.extend(this._options, o); 119 120 this._element = this._options.element; 121 this._element.innerHTML = this._options.template; 122 this._listElement = this._options.listElement || this._find(this._element, 'list'); 123 124 this._classes = this._options.classes; 125 126 this._button = this._createUploadButton(this._find(this._element, 'button')); 127 128 this._bindCancelEvent(); 129 this._bindUploadEvent(); 130 this._setupDragDrop(); 131}; 132 133qq.extend(qq.FileUploaderExtended.prototype, qq.FileUploader.prototype); 134 135qq.extend(qq.FileUploaderExtended.prototype, { 136 _bindUploadEvent: function(){ 137 var self = this, 138 list = this._listElement; 139 140 qq.attach(document.getElementById('mediamanager__upload_button'), 'click', function(e){ 141 e = e || window.event; 142 var target = e.target || e.srcElement; 143 qq.preventDefault(e); 144 self._handler._options.onUpload(); 145 146 jQuery(".qq-upload-name-input").each(function (i) { 147 jQuery(this).attr('disabled', 'disabled'); 148 }); 149 }); 150 }, 151 152 _onComplete: function(id, fileName, result){ 153 this._filesInProgress--; 154 155 // mark completed 156 var item = this._getItemByFileId(id); 157 qq.remove(this._find(item, 'cancel')); 158 qq.remove(this._find(item, 'spinner')); 159 160 var nameInput = this._find(item, 'nameInput'); 161 var fileElement = this._find(item, 'file'); 162 qq.setText(fileElement, nameInput.value); 163 qq.removeClass(fileElement, 'qq-upload-file-hidden'); 164 qq.remove(nameInput); 165 jQuery('.qq-upload-button, #mediamanager__upload_button').remove(); 166 jQuery('.dw__ow').parent().hide(); 167 jQuery('.qq-upload-drop-area').remove(); 168 169 if (result.success){ 170 qq.addClass(item, this._classes.success); 171 $link = '<a href="' + result.link + '" name="h_:' + result.id + '" class="select">' + nameInput.value + '</a>'; 172 jQuery(fileElement).html($link); 173 174 } else { 175 qq.addClass(item, this._classes.fail); 176 var fail = this._find(item, 'failedText'); 177 if (result.error) qq.setText(fail, result.error); 178 } 179 180 if (document.getElementById('media__content') && !document.getElementById('mediamanager__done_form')) { 181 var action = document.location.href; 182 var i = action.indexOf('?'); 183 if (i) action = action.substr(0, i); 184 var button = '<form method="post" action="' + action + '" id="mediamanager__done_form"><div>'; 185 button += '<input type="hidden" value="' + result.ns + '" name="ns">'; 186 button += '<input class="button" type="submit" value="' + LANG.media_done_btn + '"></div></form>'; 187 jQuery('#mediamanager__uploader').append(button); 188 } 189 } 190 191}); 192 193qq.extend(qq.UploadHandlerForm.prototype, { 194 uploadAll: function(params){ 195 this._uploadAll(params); 196 }, 197 198 getName: function(id){ 199 var file = this._inputs[id]; 200 var name = document.getElementById('mediamanager__upload_item'+id); 201 if (name != null) { 202 return name.value; 203 } else { 204 if (file != null) { 205 // get input value and remove path to normalize 206 return file.value.replace(/.*(\/|\\)/, ""); 207 } else { 208 return null; 209 } 210 } 211 }, 212 213 _uploadAll: function(params){ 214 jQuery(".qq-upload-spinner-hidden").each(function (i) { 215 jQuery(this).addClass('qq-upload-spinner'); 216 }); 217 for (key in this._inputs) { 218 this.upload(key, params); 219 } 220 221 }, 222 223 _upload: function(id, params){ 224 var input = this._inputs[id]; 225 226 if (!input){ 227 throw new Error('file with passed id was not added, or already uploaded or cancelled'); 228 } 229 230 var fileName = this.getName(id); 231 232 var iframe = this._createIframe(id); 233 var form = this._createForm(iframe, params); 234 form.appendChild(input); 235 236 var nameInput = qq.toElement('<input name="mediaid" value="' + fileName + '" type="text">'); 237 form.appendChild(nameInput); 238 239 var checked = jQuery('.dw__ow').attr('checked'); 240 var owCheckbox = jQuery('.dw__ow').clone(); 241 owCheckbox.attr('checked', checked); 242 jQuery(form).append(owCheckbox); 243 244 var self = this; 245 this._attachLoadEvent(iframe, function(){ 246 self.log('iframe loaded'); 247 248 var response = self._getIframeContentJSON(iframe); 249 250 self._options.onComplete(id, fileName, response); 251 self._dequeue(id); 252 253 delete self._inputs[id]; 254 // timeout added to fix busy state in FF3.6 255 setTimeout(function(){ 256 qq.remove(iframe); 257 }, 1); 258 }); 259 260 form.submit(); 261 qq.remove(form); 262 263 return id; 264 } 265}); 266 267qq.extend(qq.UploadHandlerXhr.prototype, { 268 uploadAll: function(params){ 269 this._uploadAll(params); 270 }, 271 272 getName: function(id){ 273 var file = this._files[id]; 274 var name = document.getElementById('mediamanager__upload_item'+id); 275 if (name != null) { 276 return name.value; 277 } else { 278 if (file != null) { 279 // fix missing name in Safari 4 280 return file.fileName != null ? file.fileName : file.name; 281 } else { 282 return null; 283 } 284 } 285 }, 286 287 getSize: function(id){ 288 var file = this._files[id]; 289 if (file == null) return null; 290 return file.fileSize != null ? file.fileSize : file.size; 291 }, 292 293 _upload: function(id, params){ 294 var file = this._files[id], 295 name = this.getName(id), 296 size = this.getSize(id); 297 if (name == null || size == null) return; 298 299 this._loaded[id] = 0; 300 301 var xhr = this._xhrs[id] = new XMLHttpRequest(); 302 var self = this; 303 304 xhr.upload.onprogress = function(e){ 305 if (e.lengthComputable){ 306 self._loaded[id] = e.loaded; 307 self._options.onProgress(id, name, e.loaded, e.total); 308 } 309 }; 310 311 xhr.onreadystatechange = function(){ 312 if (xhr.readyState == 4){ 313 self._onComplete(id, xhr); 314 } 315 }; 316 317 // build query string 318 params = params || {}; 319 params['qqfile'] = name; 320 params['ow'] = jQuery('.dw__ow').attr('checked'); 321 var queryString = qq.obj2url(params, this._options.action); 322 323 xhr.open("POST", queryString, true); 324 xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 325 xhr.setRequestHeader("X-File-Name", encodeURIComponent(name)); 326 xhr.setRequestHeader("Content-Type", "application/octet-stream"); 327 xhr.send(file); 328 }, 329 330 _uploadAll: function(params){ 331 jQuery(".qq-upload-spinner-hidden").each(function (i) { 332 jQuery(this).addClass('qq-upload-spinner'); 333 }); 334 for (key in this._files) { 335 this.upload(key, params); 336 } 337 338 } 339}); 340