trumbowyg.upload.js (11498B)
1 /* =========================================================== 2 * trumbowyg.upload.js v1.2 3 * Upload plugin for Trumbowyg 4 * http://alex-d.github.com/Trumbowyg 5 * =========================================================== 6 * Author : Alexandre Demode (Alex-D) 7 * Twitter : @AlexandreDemode 8 * Website : alex-d.fr 9 * Mod by : Aleksandr-ru 10 * Twitter : @Aleksandr_ru 11 * Website : aleksandr.ru 12 */ 13 14 (function ($) { 15 'use strict'; 16 17 var defaultOptions = { 18 serverPath: '', 19 fileFieldName: 'fileToUpload', 20 data: [], // Additional data for ajax [{name: 'key', value: 'value'}] 21 headers: {}, // Additional headers 22 xhrFields: {}, // Additional fields 23 urlPropertyName: 'file', // How to get url from the json response (for instance 'url' for {url: ....}) 24 statusPropertyName: 'success', // How to get status from the json response 25 success: undefined, // Success callback: function (data, trumbowyg, $modal, values) {} 26 error: undefined, // Error callback: function () {} 27 imageWidthModalEdit: false // Add ability to edit image width 28 }; 29 30 function getDeep(object, propertyParts) { 31 var mainProperty = propertyParts.shift(), 32 otherProperties = propertyParts; 33 34 if (object !== null) { 35 if (otherProperties.length === 0) { 36 return object[mainProperty]; 37 } 38 39 if (typeof object === 'object') { 40 return getDeep(object[mainProperty], otherProperties); 41 } 42 } 43 return object; 44 } 45 46 addXhrProgressEvent(); 47 48 $.extend(true, $.trumbowyg, { 49 langs: { 50 // jshint camelcase:false 51 en: { 52 upload: 'Upload', 53 file: 'File', 54 uploadError: 'Error' 55 }, 56 sk: { 57 upload: 'Nahrať', 58 file: 'Súbor', 59 uploadError: 'Chyba' 60 }, 61 fr: { 62 upload: 'Envoi', 63 file: 'Fichier', 64 uploadError: 'Erreur' 65 }, 66 cs: { 67 upload: 'Nahrát obrázek', 68 file: 'Soubor', 69 uploadError: 'Chyba' 70 }, 71 zh_cn: { 72 upload: '上传', 73 file: '文件', 74 uploadError: '错误' 75 }, 76 zh_tw: { 77 upload: '上傳', 78 file: '文件', 79 uploadError: '錯誤' 80 }, 81 ru: { 82 upload: 'Загрузка', 83 file: 'Файл', 84 uploadError: 'Ошибка' 85 }, 86 ja: { 87 upload: 'アップロード', 88 file: 'ファイル', 89 uploadError: 'エラー' 90 }, 91 pt_br: { 92 upload: 'Enviar do local', 93 file: 'Arquivo', 94 uploadError: 'Erro' 95 }, 96 tr: { 97 upload: 'Yükle', 98 file: 'Dosya', 99 uploadError: 'Hata' 100 } 101 }, 102 // jshint camelcase:true 103 104 plugins: { 105 upload: { 106 init: function (trumbowyg) { 107 trumbowyg.o.plugins.upload = $.extend(true, {}, defaultOptions, trumbowyg.o.plugins.upload || {}); 108 var btnDef = { 109 fn: function () { 110 trumbowyg.saveRange(); 111 112 var file, 113 prefix = trumbowyg.o.prefix; 114 115 var fields = { 116 file: { 117 type: 'file', 118 required: true, 119 attributes: { 120 accept: 'image/*' 121 } 122 }, 123 alt: { 124 label: 'description', 125 value: trumbowyg.getRangeText() 126 } 127 }; 128 129 if (trumbowyg.o.plugins.upload.imageWidthModalEdit) { 130 fields.width = { 131 value: '' 132 }; 133 } 134 135 var $modal = trumbowyg.openModalInsert( 136 // Title 137 trumbowyg.lang.upload, 138 139 // Fields 140 fields, 141 142 // Callback 143 function (values) { 144 var data = new FormData(); 145 data.append(trumbowyg.o.plugins.upload.fileFieldName, file); 146 147 trumbowyg.o.plugins.upload.data.map(function (cur) { 148 data.append(cur.name, cur.value); 149 }); 150 151 $.map(values, function (curr, key) { 152 if (key !== 'file') { 153 data.append(key, curr); 154 } 155 }); 156 157 if ($('.' + prefix + 'progress', $modal).length === 0) { 158 $('.' + prefix + 'modal-title', $modal) 159 .after( 160 $('<div/>', { 161 'class': prefix + 'progress' 162 }).append( 163 $('<div/>', { 164 'class': prefix + 'progress-bar' 165 }) 166 ) 167 ); 168 } 169 170 $.ajax({ 171 url: trumbowyg.o.plugins.upload.serverPath, 172 headers: trumbowyg.o.plugins.upload.headers, 173 xhrFields: trumbowyg.o.plugins.upload.xhrFields, 174 type: 'POST', 175 data: data, 176 cache: false, 177 dataType: 'json', 178 processData: false, 179 contentType: false, 180 181 progressUpload: function (e) { 182 $('.' + prefix + 'progress-bar').css('width', Math.round(e.loaded * 100 / e.total) + '%'); 183 }, 184 185 success: function (data) { 186 if (trumbowyg.o.plugins.upload.success) { 187 trumbowyg.o.plugins.upload.success(data, trumbowyg, $modal, values); 188 } else { 189 if (!!getDeep(data, trumbowyg.o.plugins.upload.statusPropertyName.split('.'))) { 190 var url = getDeep(data, trumbowyg.o.plugins.upload.urlPropertyName.split('.')); 191 trumbowyg.execCmd('insertImage', url); 192 var $img = $('img[src="' + url + '"]:not([alt])', trumbowyg.$box); 193 $img.attr('alt', values.alt); 194 if (trumbowyg.o.imageWidthModalEdit && parseInt(values.width) > 0) { 195 $img.attr({ 196 width: values.width 197 }); 198 } 199 setTimeout(function () { 200 trumbowyg.closeModal(); 201 }, 250); 202 trumbowyg.$c.trigger('tbwuploadsuccess', [trumbowyg, data, url]); 203 } else { 204 trumbowyg.addErrorOnModalField( 205 $('input[type=file]', $modal), 206 trumbowyg.lang[data.message] 207 ); 208 trumbowyg.$c.trigger('tbwuploaderror', [trumbowyg, data]); 209 } 210 } 211 }, 212 213 error: trumbowyg.o.plugins.upload.error || function () { 214 trumbowyg.addErrorOnModalField( 215 $('input[type=file]', $modal), 216 trumbowyg.lang.uploadError 217 ); 218 trumbowyg.$c.trigger('tbwuploaderror', [trumbowyg]); 219 } 220 }); 221 } 222 ); 223 224 $('input[type=file]').on('change', function (e) { 225 try { 226 // If multiple files allowed, we just get the first. 227 file = e.target.files[0]; 228 } catch (err) { 229 // In IE8, multiple files not allowed 230 file = e.target.value; 231 } 232 }); 233 } 234 }; 235 236 trumbowyg.addBtnDef('upload', btnDef); 237 } 238 } 239 } 240 }); 241 242 function addXhrProgressEvent() { 243 if (!$.trumbowyg.addedXhrProgressEvent) { // Avoid adding progress event multiple times 244 var originalXhr = $.ajaxSettings.xhr; 245 $.ajaxSetup({ 246 xhr: function () { 247 var req = originalXhr(), 248 that = this; 249 if (req && typeof req.upload === 'object' && that.progressUpload !== undefined) { 250 req.upload.addEventListener('progress', function (e) { 251 that.progressUpload(e); 252 }, false); 253 } 254 255 return req; 256 } 257 }); 258 $.trumbowyg.addedXhrProgressEvent = true; 259 } 260 } 261 })(jQuery);