5
|
1 |
/* global pluploadL10n, plupload, _wpPluploadSettings */ |
|
2 |
|
0
|
3 |
window.wp = window.wp || {}; |
|
4 |
|
5
|
5 |
( function( exports, $ ) { |
0
|
6 |
var Uploader; |
|
7 |
|
5
|
8 |
if ( typeof _wpPluploadSettings === 'undefined' ) { |
0
|
9 |
return; |
5
|
10 |
} |
0
|
11 |
|
5
|
12 |
/** |
|
13 |
* A WordPress uploader. |
0
|
14 |
* |
5
|
15 |
* The Plupload library provides cross-browser uploader UI integration. |
|
16 |
* This object bridges the Plupload API to integrate uploads into the |
|
17 |
* WordPress back-end and the WordPress media experience. |
0
|
18 |
* |
5
|
19 |
* @param {object} options The options passed to the new plupload instance. |
|
20 |
* @param {object} options.container The id of uploader container. |
|
21 |
* @param {object} options.browser The id of button to trigger the file select. |
|
22 |
* @param {object} options.dropzone The id of file drop target. |
|
23 |
* @param {object} options.plupload An object of parameters to pass to the plupload instance. |
|
24 |
* @param {object} options.params An object of parameters to pass to $_POST when uploading the file. |
|
25 |
* Extends this.plupload.multipart_params under the hood. |
0
|
26 |
*/ |
|
27 |
Uploader = function( options ) { |
|
28 |
var self = this, |
5
|
29 |
isIE = navigator.userAgent.indexOf('Trident/') != -1 || navigator.userAgent.indexOf('MSIE ') != -1, |
0
|
30 |
elements = { |
|
31 |
container: 'container', |
|
32 |
browser: 'browse_button', |
|
33 |
dropzone: 'drop_element' |
|
34 |
}, |
|
35 |
key, error; |
|
36 |
|
|
37 |
this.supports = { |
|
38 |
upload: Uploader.browser.supported |
|
39 |
}; |
|
40 |
|
|
41 |
this.supported = this.supports.upload; |
|
42 |
|
5
|
43 |
if ( ! this.supported ) { |
0
|
44 |
return; |
5
|
45 |
} |
0
|
46 |
|
5
|
47 |
// Arguments to send to pluplad.Uploader(). |
0
|
48 |
// Use deep extend to ensure that multipart_params and other objects are cloned. |
|
49 |
this.plupload = $.extend( true, { multipart_params: {} }, Uploader.defaults ); |
|
50 |
this.container = document.body; // Set default container. |
|
51 |
|
5
|
52 |
// Extend the instance with options. |
0
|
53 |
// |
|
54 |
// Use deep extend to allow options.plupload to override individual |
|
55 |
// default plupload keys. |
|
56 |
$.extend( true, this, options ); |
|
57 |
|
|
58 |
// Proxy all methods so this always refers to the current instance. |
|
59 |
for ( key in this ) { |
5
|
60 |
if ( $.isFunction( this[ key ] ) ) { |
0
|
61 |
this[ key ] = $.proxy( this[ key ], this ); |
5
|
62 |
} |
0
|
63 |
} |
|
64 |
|
5
|
65 |
// Ensure all elements are jQuery elements and have id attributes, |
|
66 |
// then set the proper plupload arguments to the ids. |
0
|
67 |
for ( key in elements ) { |
5
|
68 |
if ( ! this[ key ] ) { |
0
|
69 |
continue; |
5
|
70 |
} |
0
|
71 |
|
|
72 |
this[ key ] = $( this[ key ] ).first(); |
|
73 |
|
|
74 |
if ( ! this[ key ].length ) { |
|
75 |
delete this[ key ]; |
|
76 |
continue; |
|
77 |
} |
|
78 |
|
5
|
79 |
if ( ! this[ key ].prop('id') ) { |
0
|
80 |
this[ key ].prop( 'id', '__wp-uploader-id-' + Uploader.uuid++ ); |
5
|
81 |
} |
|
82 |
|
0
|
83 |
this.plupload[ elements[ key ] ] = this[ key ].prop('id'); |
|
84 |
} |
|
85 |
|
|
86 |
// If the uploader has neither a browse button nor a dropzone, bail. |
5
|
87 |
if ( ! ( this.browser && this.browser.length ) && ! ( this.dropzone && this.dropzone.length ) ) { |
0
|
88 |
return; |
5
|
89 |
} |
0
|
90 |
|
5
|
91 |
// Make sure flash sends cookies (seems in IE it does without switching to urlstream mode) |
|
92 |
if ( ! isIE && 'flash' === plupload.predictRuntime( this.plupload ) && |
|
93 |
( ! this.plupload.required_features || ! this.plupload.required_features.hasOwnProperty( 'send_binary_string' ) ) ) { |
|
94 |
|
|
95 |
this.plupload.required_features = this.plupload.required_features || {}; |
|
96 |
this.plupload.required_features.send_binary_string = true; |
|
97 |
} |
|
98 |
|
|
99 |
// Initialize the plupload instance. |
0
|
100 |
this.uploader = new plupload.Uploader( this.plupload ); |
|
101 |
delete this.plupload; |
|
102 |
|
|
103 |
// Set default params and remove this.params alias. |
|
104 |
this.param( this.params || {} ); |
|
105 |
delete this.params; |
|
106 |
|
5
|
107 |
/** |
|
108 |
* Custom error callback. |
|
109 |
* |
|
110 |
* Add a new error to the errors collection, so other modules can track |
|
111 |
* and display errors. @see wp.Uploader.errors. |
|
112 |
* |
|
113 |
* @param {string} message |
|
114 |
* @param {object} data |
|
115 |
* @param {plupload.File} file File that was uploaded. |
|
116 |
*/ |
0
|
117 |
error = function( message, data, file ) { |
5
|
118 |
if ( file.attachment ) { |
0
|
119 |
file.attachment.destroy(); |
5
|
120 |
} |
0
|
121 |
|
|
122 |
Uploader.errors.unshift({ |
|
123 |
message: message || pluploadL10n.default_error, |
|
124 |
data: data, |
|
125 |
file: file |
|
126 |
}); |
|
127 |
|
|
128 |
self.error( message, data, file ); |
|
129 |
}; |
|
130 |
|
5
|
131 |
/** |
|
132 |
* After the Uploader has been initialized, initialize some behaviors for the dropzone. |
|
133 |
* |
|
134 |
* @param {plupload.Uploader} uploader Uploader instance. |
|
135 |
*/ |
|
136 |
this.uploader.bind( 'init', function( uploader ) { |
|
137 |
var timer, active, dragdrop, |
|
138 |
dropzone = self.dropzone; |
0
|
139 |
|
5
|
140 |
dragdrop = self.supports.dragdrop = uploader.features.dragdrop && ! Uploader.browser.mobile; |
0
|
141 |
|
5
|
142 |
// Generate drag/drop helper classes. |
|
143 |
if ( ! dropzone ) { |
0
|
144 |
return; |
5
|
145 |
} |
0
|
146 |
|
5
|
147 |
dropzone.toggleClass( 'supports-drag-drop', !! dragdrop ); |
0
|
148 |
|
5
|
149 |
if ( ! dragdrop ) { |
0
|
150 |
return dropzone.unbind('.wp-uploader'); |
5
|
151 |
} |
0
|
152 |
|
5
|
153 |
// 'dragenter' doesn't fire correctly, simulate it with a limited 'dragover'. |
|
154 |
dropzone.bind( 'dragover.wp-uploader', function() { |
|
155 |
if ( timer ) { |
0
|
156 |
clearTimeout( timer ); |
5
|
157 |
} |
0
|
158 |
|
5
|
159 |
if ( active ) { |
0
|
160 |
return; |
5
|
161 |
} |
0
|
162 |
|
|
163 |
dropzone.trigger('dropzone:enter').addClass('drag-over'); |
|
164 |
active = true; |
|
165 |
}); |
|
166 |
|
5
|
167 |
dropzone.bind('dragleave.wp-uploader, drop.wp-uploader', function() { |
0
|
168 |
// Using an instant timer prevents the drag-over class from |
|
169 |
// being quickly removed and re-added when elements inside the |
|
170 |
// dropzone are repositioned. |
|
171 |
// |
5
|
172 |
// @see https://core.trac.wordpress.org/ticket/21705 |
0
|
173 |
timer = setTimeout( function() { |
|
174 |
active = false; |
|
175 |
dropzone.trigger('dropzone:leave').removeClass('drag-over'); |
|
176 |
}, 0 ); |
|
177 |
}); |
5
|
178 |
|
|
179 |
self.ready = true; |
|
180 |
$(self).trigger( 'uploader:ready' ); |
|
181 |
}); |
|
182 |
|
|
183 |
this.uploader.init(); |
0
|
184 |
|
|
185 |
if ( this.browser ) { |
|
186 |
this.browser.on( 'mouseenter', this.refresh ); |
|
187 |
} else { |
|
188 |
this.uploader.disableBrowse( true ); |
|
189 |
// If HTML5 mode, hide the auto-created file container. |
|
190 |
$('#' + this.uploader.id + '_html5_container').hide(); |
|
191 |
} |
|
192 |
|
5
|
193 |
/** |
|
194 |
* After files were filtered and added to the queue, create a model for each. |
|
195 |
* |
|
196 |
* @event FilesAdded |
|
197 |
* @param {plupload.Uploader} uploader Uploader instance. |
|
198 |
* @param {Array} files Array of file objects that were added to queue by the user. |
|
199 |
*/ |
0
|
200 |
this.uploader.bind( 'FilesAdded', function( up, files ) { |
|
201 |
_.each( files, function( file ) { |
|
202 |
var attributes, image; |
|
203 |
|
|
204 |
// Ignore failed uploads. |
5
|
205 |
if ( plupload.FAILED === file.status ) { |
0
|
206 |
return; |
5
|
207 |
} |
0
|
208 |
|
|
209 |
// Generate attributes for a new `Attachment` model. |
|
210 |
attributes = _.extend({ |
|
211 |
file: file, |
|
212 |
uploading: true, |
|
213 |
date: new Date(), |
|
214 |
filename: file.name, |
|
215 |
menuOrder: 0, |
|
216 |
uploadedTo: wp.media.model.settings.post.id |
|
217 |
}, _.pick( file, 'loaded', 'size', 'percent' ) ); |
|
218 |
|
|
219 |
// Handle early mime type scanning for images. |
|
220 |
image = /(?:jpe?g|png|gif)$/i.exec( file.name ); |
|
221 |
|
5
|
222 |
// For images set the model's type and subtype attributes. |
0
|
223 |
if ( image ) { |
|
224 |
attributes.type = 'image'; |
|
225 |
|
|
226 |
// `jpeg`, `png` and `gif` are valid subtypes. |
|
227 |
// `jpg` is not, so map it to `jpeg`. |
|
228 |
attributes.subtype = ( 'jpg' === image[0] ) ? 'jpeg' : image[0]; |
|
229 |
} |
|
230 |
|
5
|
231 |
// Create a model for the attachment, and add it to the Upload queue collection |
|
232 |
// so listeners to the upload queue can track and display upload progress. |
0
|
233 |
file.attachment = wp.media.model.Attachment.create( attributes ); |
|
234 |
Uploader.queue.add( file.attachment ); |
|
235 |
|
|
236 |
self.added( file.attachment ); |
|
237 |
}); |
|
238 |
|
|
239 |
up.refresh(); |
|
240 |
up.start(); |
|
241 |
}); |
|
242 |
|
|
243 |
this.uploader.bind( 'UploadProgress', function( up, file ) { |
|
244 |
file.attachment.set( _.pick( file, 'loaded', 'percent' ) ); |
|
245 |
self.progress( file.attachment ); |
|
246 |
}); |
|
247 |
|
5
|
248 |
/** |
|
249 |
* After a file is successfully uploaded, update its model. |
|
250 |
* |
|
251 |
* @param {plupload.Uploader} uploader Uploader instance. |
|
252 |
* @param {plupload.File} file File that was uploaded. |
|
253 |
* @param {Object} response Object with response properties. |
|
254 |
* @return {mixed} |
|
255 |
*/ |
0
|
256 |
this.uploader.bind( 'FileUploaded', function( up, file, response ) { |
|
257 |
var complete; |
|
258 |
|
|
259 |
try { |
|
260 |
response = JSON.parse( response.response ); |
|
261 |
} catch ( e ) { |
|
262 |
return error( pluploadL10n.default_error, e, file ); |
|
263 |
} |
|
264 |
|
|
265 |
if ( ! _.isObject( response ) || _.isUndefined( response.success ) ) |
|
266 |
return error( pluploadL10n.default_error, null, file ); |
|
267 |
else if ( ! response.success ) |
|
268 |
return error( response.data && response.data.message, response.data, file ); |
|
269 |
|
|
270 |
_.each(['file','loaded','size','percent'], function( key ) { |
|
271 |
file.attachment.unset( key ); |
|
272 |
}); |
|
273 |
|
|
274 |
file.attachment.set( _.extend( response.data, { uploading: false }) ); |
|
275 |
wp.media.model.Attachment.get( response.data.id, file.attachment ); |
|
276 |
|
|
277 |
complete = Uploader.queue.all( function( attachment ) { |
|
278 |
return ! attachment.get('uploading'); |
|
279 |
}); |
|
280 |
|
|
281 |
if ( complete ) |
|
282 |
Uploader.queue.reset(); |
|
283 |
|
|
284 |
self.success( file.attachment ); |
|
285 |
}); |
|
286 |
|
5
|
287 |
/** |
|
288 |
* When plupload surfaces an error, send it to the error handler. |
|
289 |
* |
|
290 |
* @param {plupload.Uploader} uploader Uploader instance. |
|
291 |
* @param {Object} error Contains code, message and sometimes file and other details. |
|
292 |
*/ |
0
|
293 |
this.uploader.bind( 'Error', function( up, pluploadError ) { |
|
294 |
var message = pluploadL10n.default_error, |
|
295 |
key; |
|
296 |
|
|
297 |
// Check for plupload errors. |
|
298 |
for ( key in Uploader.errorMap ) { |
|
299 |
if ( pluploadError.code === plupload[ key ] ) { |
|
300 |
message = Uploader.errorMap[ key ]; |
5
|
301 |
|
|
302 |
if ( _.isFunction( message ) ) { |
0
|
303 |
message = message( pluploadError.file, pluploadError ); |
5
|
304 |
} |
|
305 |
|
0
|
306 |
break; |
|
307 |
} |
|
308 |
} |
|
309 |
|
|
310 |
error( message, pluploadError, pluploadError.file ); |
|
311 |
up.refresh(); |
|
312 |
}); |
|
313 |
|
5
|
314 |
this.uploader.bind( 'PostInit', function() { |
|
315 |
self.init(); |
|
316 |
}); |
0
|
317 |
}; |
|
318 |
|
|
319 |
// Adds the 'defaults' and 'browser' properties. |
|
320 |
$.extend( Uploader, _wpPluploadSettings ); |
|
321 |
|
|
322 |
Uploader.uuid = 0; |
|
323 |
|
5
|
324 |
// Map Plupload error codes to user friendly error messages. |
0
|
325 |
Uploader.errorMap = { |
|
326 |
'FAILED': pluploadL10n.upload_failed, |
|
327 |
'FILE_EXTENSION_ERROR': pluploadL10n.invalid_filetype, |
|
328 |
'IMAGE_FORMAT_ERROR': pluploadL10n.not_an_image, |
|
329 |
'IMAGE_MEMORY_ERROR': pluploadL10n.image_memory_exceeded, |
|
330 |
'IMAGE_DIMENSIONS_ERROR': pluploadL10n.image_dimensions_exceeded, |
|
331 |
'GENERIC_ERROR': pluploadL10n.upload_failed, |
|
332 |
'IO_ERROR': pluploadL10n.io_error, |
|
333 |
'HTTP_ERROR': pluploadL10n.http_error, |
|
334 |
'SECURITY_ERROR': pluploadL10n.security_error, |
|
335 |
|
|
336 |
'FILE_SIZE_ERROR': function( file ) { |
|
337 |
return pluploadL10n.file_exceeds_size_limit.replace('%s', file.name); |
|
338 |
} |
|
339 |
}; |
|
340 |
|
|
341 |
$.extend( Uploader.prototype, { |
|
342 |
/** |
|
343 |
* Acts as a shortcut to extending the uploader's multipart_params object. |
|
344 |
* |
|
345 |
* param( key ) |
|
346 |
* Returns the value of the key. |
|
347 |
* |
|
348 |
* param( key, value ) |
|
349 |
* Sets the value of a key. |
|
350 |
* |
|
351 |
* param( map ) |
|
352 |
* Sets values for a map of data. |
|
353 |
*/ |
|
354 |
param: function( key, value ) { |
5
|
355 |
if ( arguments.length === 1 && typeof key === 'string' ) { |
0
|
356 |
return this.uploader.settings.multipart_params[ key ]; |
5
|
357 |
} |
0
|
358 |
|
|
359 |
if ( arguments.length > 1 ) { |
|
360 |
this.uploader.settings.multipart_params[ key ] = value; |
|
361 |
} else { |
|
362 |
$.extend( this.uploader.settings.multipart_params, key ); |
|
363 |
} |
|
364 |
}, |
|
365 |
|
5
|
366 |
/** |
|
367 |
* Make a few internal event callbacks available on the wp.Uploader object |
|
368 |
* to change the Uploader internals if absolutely necessary. |
|
369 |
*/ |
0
|
370 |
init: function() {}, |
|
371 |
error: function() {}, |
|
372 |
success: function() {}, |
|
373 |
added: function() {}, |
|
374 |
progress: function() {}, |
|
375 |
complete: function() {}, |
|
376 |
refresh: function() { |
|
377 |
var node, attached, container, id; |
|
378 |
|
|
379 |
if ( this.browser ) { |
|
380 |
node = this.browser[0]; |
|
381 |
|
|
382 |
// Check if the browser node is in the DOM. |
|
383 |
while ( node ) { |
|
384 |
if ( node === document.body ) { |
|
385 |
attached = true; |
|
386 |
break; |
|
387 |
} |
|
388 |
node = node.parentNode; |
|
389 |
} |
|
390 |
|
|
391 |
// If the browser node is not attached to the DOM, use a |
|
392 |
// temporary container to house it, as the browser button |
|
393 |
// shims require the button to exist in the DOM at all times. |
|
394 |
if ( ! attached ) { |
|
395 |
id = 'wp-uploader-browser-' + this.uploader.id; |
|
396 |
|
|
397 |
container = $( '#' + id ); |
|
398 |
if ( ! container.length ) { |
|
399 |
container = $('<div class="wp-uploader-browser" />').css({ |
|
400 |
position: 'fixed', |
|
401 |
top: '-1000px', |
|
402 |
left: '-1000px', |
|
403 |
height: 0, |
|
404 |
width: 0 |
|
405 |
}).attr( 'id', 'wp-uploader-browser-' + this.uploader.id ).appendTo('body'); |
|
406 |
} |
|
407 |
|
|
408 |
container.append( this.browser ); |
|
409 |
} |
|
410 |
} |
|
411 |
|
|
412 |
this.uploader.refresh(); |
|
413 |
} |
|
414 |
}); |
|
415 |
|
5
|
416 |
// Create a collection of attachments in the upload queue, |
|
417 |
// so that other modules can track and display upload progress. |
0
|
418 |
Uploader.queue = new wp.media.model.Attachments( [], { query: false }); |
5
|
419 |
|
|
420 |
// Create a collection to collect errors incurred while attempting upload. |
0
|
421 |
Uploader.errors = new Backbone.Collection(); |
|
422 |
|
|
423 |
exports.Uploader = Uploader; |
|
424 |
})( wp, jQuery ); |