1/* global pluploadL10n, plupload, _wpPluploadSettings */ 2 3/** 4 * @namespace wp 5 */ 6window.wp = window.wp || {}; 7 8( function( exports, $ ) { 9 var Uploader; 10 11 if ( typeof _wpPluploadSettings === 'undefined' ) { 12 return; 13 } 14 15 /** 16 * A WordPress uploader. 17 * 18 * The Plupload library provides cross-browser uploader UI integration. 19 * This object bridges the Plupload API to integrate uploads into the 20 * WordPress back end and the WordPress media experience. 21 * 22 * @class 23 * @memberOf wp 24 * @alias wp.Uploader 25 * 26 * @param {object} options The options passed to the new plupload instance. 27 * @param {object} options.container The id of uploader container. 28 * @param {object} options.browser The id of button to trigger the file select. 29 * @param {object} options.dropzone The id of file drop target. 30 * @param {object} options.plupload An object of parameters to pass to the plupload instance. 31 * @param {object} options.params An object of parameters to pass to $_POST when uploading the file. 32 * Extends this.plupload.multipart_params under the hood. 33 */ 34 Uploader = function( options ) { 35 var self = this, 36 isIE, // Not used, back-compat. 37 elements = { 38 container: 'container', 39 browser: 'browse_button', 40 dropzone: 'drop_element' 41 }, 42 tryAgainCount = {}, 43 tryAgain, 44 key, 45 error, 46 fileUploaded; 47 48 this.supports = { 49 upload: Uploader.browser.supported 50 }; 51 52 this.supported = this.supports.upload; 53 54 if ( ! this.supported ) { 55 return; 56 } 57 58 // Arguments to send to pluplad.Uploader(). 59 // Use deep extend to ensure that multipart_params and other objects are cloned. 60 this.plupload = $.extend( true, { multipart_params: {} }, Uploader.defaults ); 61 this.container = document.body; // Set default container. 62 63 /* 64 * Extend the instance with options. 65 * 66 * Use deep extend to allow options.plupload to override individual 67 * default plupload keys. 68 */ 69 $.extend( true, this, options ); 70 71 // Proxy all methods so this always refers to the current instance. 72 for ( key in this ) { 73 if ( typeof this[ key ] === 'function' ) { 74 this[ key ] = $.proxy( this[ key ], this ); 75 } 76 } 77 78 // Ensure all elements are jQuery elements and have id attributes, 79 // then set the proper plupload arguments to the ids. 80 for ( key in elements ) { 81 if ( ! this[ key ] ) { 82 continue; 83 } 84 85 this[ key ] = $( this[ key ] ).first(); 86 87 if ( ! this[ key ].length ) { 88 delete this[ key ]; 89 continue; 90 } 91 92 if ( ! this[ key ].prop('id') ) { 93 this[ key ].prop( 'id', '__wp-uploader-id-' + Uploader.uuid++ ); 94 } 95 96 this.plupload[ elements[ key ] ] = this[ key ].prop('id'); 97 } 98 99 // If the uploader has neither a browse button nor a dropzone, bail. 100 if ( ! ( this.browser && this.browser.length ) && ! ( this.dropzone && this.dropzone.length ) ) { 101 return; 102 } 103 104 // Initialize the plupload instance. 105 this.uploader = new plupload.Uploader( this.plupload ); 106 delete this.plupload; 107 108 // Set default params and remove this.params alias. 109 this.param( this.params || {} ); 110 delete this.params; 111 112 /** 113 * Attempt to create image sub-sizes when an image was uploaded successfully 114 * but the server responded with HTTP 5xx error. 115 * 116 * @since 5.3.0 117 * 118 * @param {string} message Error message. 119 * @param {object} data Error data from Plupload. 120 * @param {plupload.File} file File that was uploaded. 121 */ 122 tryAgain = function( message, data, file ) { 123 var times, id; 124 125 if ( ! data || ! data.responseHeaders ) { 126 error( pluploadL10n.http_error_image, data, file, 'no-retry' ); 127 return; 128 } 129 130 id = data.responseHeaders.match( /x-wp-upload-attachment-id:\s*(\d+)/i ); 131 132 if ( id && id[1] ) { 133 id = id[1]; 134 } else { 135 error( pluploadL10n.http_error_image, data, file, 'no-retry' ); 136 return; 137 } 138 139 times = tryAgainCount[ file.id ]; 140 141 if ( times && times > 4 ) { 142 /* 143 * The file may have been uploaded and attachment post created, 144 * but post-processing and resizing failed... 145 * Do a cleanup then tell the user to scale down the image and upload it again. 146 */ 147 $.ajax({ 148 type: 'post', 149 url: ajaxurl, 150 dataType: 'json', 151 data: { 152 action: 'media-create-image-subsizes', 153 _wpnonce: _wpPluploadSettings.defaults.multipart_params._wpnonce, 154 attachment_id: id, 155 _wp_upload_failed_cleanup: true, 156 } 157 }); 158 159 error( message, data, file, 'no-retry' ); 160 return; 161 } 162 163 if ( ! times ) { 164 tryAgainCount[ file.id ] = 1; 165 } else { 166 tryAgainCount[ file.id ] = ++times; 167 } 168 169 // Another request to try to create the missing image sub-sizes. 170 $.ajax({ 171 type: 'post', 172 url: ajaxurl, 173 dataType: 'json', 174 data: { 175 action: 'media-create-image-subsizes', 176 _wpnonce: _wpPluploadSettings.defaults.multipart_params._wpnonce, 177 attachment_id: id, 178 } 179 }).done( function( response ) { 180 if ( response.success ) { 181 fileUploaded( self.uploader, file, response ); 182 } else { 183 if ( response.data && response.data.message ) { 184 message = response.data.message; 185 } 186 187 error( message, data, file, 'no-retry' ); 188 } 189 }).fail( function( jqXHR ) { 190 // If another HTTP 5xx error, try try again... 191 if ( jqXHR.status >= 500 && jqXHR.status < 600 ) { 192 tryAgain( message, data, file ); 193 return; 194 } 195 196 error( message, data, file, 'no-retry' ); 197 }); 198 } 199 200 /** 201 * Custom error callback. 202 * 203 * Add a new error to the errors collection, so other modules can track 204 * and display errors. @see wp.Uploader.errors. 205 * 206 * @param {string} message Error message. 207 * @param {object} data Error data from Plupload. 208 * @param {plupload.File} file File that was uploaded.
209 * @param {string} retry Whether to try again to create image sub-sizes. Passing 'no-retry' will prevent it. 210 */ 211 error = function( message, data, file, retry ) { 212 var isImage = file.type && file.type.indexOf( 'image/' ) === 0, 213 status = data && data.status; 214 215 // If the file is an image and the error is HTTP 5xx try to create sub-sizes again. 216 if ( retry !== 'no-retry' && isImage && status >= 500 && status < 600 ) { 217 tryAgain( message, data, file ); 218 return; 219 } 220 221 if ( file.attachment ) { 222 file.attachment.destroy(); 223 } 224 225 Uploader.errors.unshift({ 226 message: message || pluploadL10n.default_error, 227 data: data, 228 file: file 229 }); 230 231 self.error( message, data, file ); 232 }; 233 234 /** 235 * After a file is successfully uploaded, update its model. 236 * 237 * @param {plupload.Uploader} up Uploader instance. 238 * @param {plupload.File} file File that was uploaded. 239 * @param {Object} response Object with response properties. 240 */ 241 fileUploaded = function( up, file, response ) { 242 var complete; 243 244 // Remove the "uploading" UI elements. 245 _.each( ['file','loaded','size','percent'], function( key ) { 246 file.attachment.unset( key ); 247 } ); 248 249 file.attachment.set( _.extend( response.data, { uploading: false } ) ); 250 251 wp.media.model.Attachment.get( response.data.id, file.attachment ); 252 253 complete = Uploader.queue.all( function( attachment ) { 254 return ! attachment.get( 'uploading' ); 255 }); 256 257 if ( complete ) { 258 Uploader.queue.reset(); 259 } 260 261 self.success( file.attachment ); 262 } 263 264 /** 265 * After the Uploader has been initialized, initialize some behaviors for the dropzone. 266 * 267 * @param {plupload.Uploader} uploader Uploader instance. 268 */ 269 this.uploader.bind( 'init', function( uploader ) { 270 var timer, active, dragdrop, 271 dropzone = self.dropzone; 272 273 dragdrop = self.supports.dragdrop = uploader.features.dragdrop && ! Uploader.browser.mobile; 274 275 // Generate drag/drop helper classes. 276 if ( ! dropzone ) { 277 return; 278 } 279 280 dropzone.toggleClass( 'supports-drag-drop', !! dragdrop ); 281 282 if ( ! dragdrop ) { 283 return dropzone.unbind('.wp-uploader'); 284 } 285 286 // 'dragenter' doesn't fire correctly, simulate it with a limited 'dragover'. 287 dropzone.on( 'dragover.wp-uploader', function() { 288 if ( timer ) { 289 clearTimeout( timer ); 290 } 291 292 if ( active ) { 293 return; 294 } 295 296 dropzone.trigger('dropzone:enter').addClass('drag-over'); 297 active = true; 298 }); 299 300 dropzone.on('dragleave.wp-uploader, drop.wp-uploader', function() { 301 /* 302 * Using an instant timer prevents the drag-over class 303 * from being quickly removed and re-added when elements 304 * inside the dropzone are repositioned. 305 * 306 * @see https://core.trac.wordpress.org/ticket/21705 307 */ 308 timer = setTimeout( function() { 309 active = false; 310 dropzone.trigger('dropzone:leave').removeClass('drag-over'); 311 }, 0 ); 312 }); 313 314 self.ready = true; 315 $(self).trigger( 'uploader:ready' ); 316 }); 317 318 this.uploader.bind( 'postinit', function( up ) { 319 up.refresh(); 320 self.init(); 321 }); 322 323 this.uploader.init(); 324 325 if ( this.browser ) { 326 this.browser.on( 'mouseenter', this.refresh ); 327 } else { 328 this.uploader.disableBrowse( true ); 329 } 330 331 $( self ).on( 'uploader:ready', function() { 332 $( '.moxie-shim-html5 input[type="file"]' ) 333 .attr( { 334 tabIndex: '-1', 335 'aria-hidden': 'true' 336 } ); 337 } ); 338 339 /** 340 * After files were filtered and added to the queue, create a model for each. 341 * 342 * @param {plupload.Uploader} up Uploader instance. 343 * @param {Array} files Array of file objects that were added to queue by the user. 344 */ 345 this.uploader.bind( 'FilesAdded', function( up, files ) { 346 _.each( files, function( file ) { 347 var attributes, image; 348 349 // Ignore failed uploads. 350 if ( plupload.FAILED === file.status ) { 351 return; 352 } 353 354 if ( file.type === 'image/heic' && up.settings.heic_upload_error ) { 355 // Show error but do not block uploading. 356 Uploader.errors.unshift({ 357 message: pluploadL10n.unsupported_image, 358 data: {}, 359 file: file 360 }); 361 } else if ( file.type === 'image/webp' && up.settings.webp_upload_error ) { 362 // Disallow uploading of WebP images if the server cannot edit them. 363 error( pluploadL10n.noneditable_image, {}, file, 'no-retry' ); 364 up.removeFile( file ); 365 return; 366 } else if ( file.type === 'image/avif' && up.settings.avif_upload_error ) { 367 // Disallow uploading of AVIF images if the server cannot edit them. 368 error( pluploadL10n.noneditable_image, {}, file, 'no-retry' ); 369 up.removeFile( file ); 370 return; 371 } 372 373 // Generate attributes for a new `Attachment` model. 374 attributes = _.extend({ 375 file: file, 376 uploading: true, 377 date: new Date(), 378 filename: file.name, 379 menuOrder: 0, 380 uploadedTo: wp.media.model.settings.post.id 381 }, _.pick( file, 'loaded', 'size', 'percent' ) ); 382 383 // Handle early mime type scanning for images. 384 image = /(?:jpe?g|png|gif)$/i.exec( file.name ); 385 386 // For images set the model's type and subtype attributes. 387 if ( image ) { 388 attributes.type = 'image'; 389 390 // `jpeg`, `png` and `gif` are valid subtypes. 391 // `jpg` is not, so map it to `jpeg`. 392 attributes.subtype = ( 'jpg' === image[0] ) ? 'jpeg' : image[0]; 393 } 394 395 // Create a model for the attachment, and add it to the Upload queue collection
396 // so listeners to the upload queue can track and display upload progress. 397 file.attachment = wp.media.model.Attachment.create( attributes ); 398 Uploader.queue.add( file.attachment ); 399 400 self.added( file.attachment ); 401 }); 402 403 up.refresh(); 404 up.start(); 405 }); 406 407 this.uploader.bind( 'UploadProgress', function( up, file ) { 408 file.attachment.set( _.pick( file, 'loaded', 'percent' ) ); 409 self.progress( file.attachment ); 410 }); 411 412 /** 413 * After a file is successfully uploaded, update its model. 414 * 415 * @param {plupload.Uploader} up Uploader instance. 416 * @param {plupload.File} file File that was uploaded. 417 * @param {Object} response Object with response properties. 418 * @return {mixed} 419 */ 420 this.uploader.bind( 'FileUploaded', function( up, file, response ) { 421 422 try { 423 response = JSON.parse( response.response ); 424 } catch ( e ) { 425 return error( pluploadL10n.default_error, e, file ); 426 } 427 428 if ( ! _.isObject( response ) || _.isUndefined( response.success ) ) { 429 return error( pluploadL10n.default_error, null, file ); 430 } else if ( ! response.success ) { 431 return error( response.data && response.data.message, response.data, file ); 432 } 433 434 // Success. Update the UI with the new attachment. 435 fileUploaded( up, file, response ); 436 }); 437 438 /** 439 * When plupload surfaces an error, send it to the error handler. 440 * 441 * @param {plupload.Uploader} up Uploader instance. 442 * @param {Object} pluploadError Contains code, message and sometimes file and other details. 443 */ 444 this.uploader.bind( 'Error', function( up, pluploadError ) { 445 var message = pluploadL10n.default_error, 446 key; 447 448 // Check for plupload errors. 449 for ( key in Uploader.errorMap ) { 450 if ( pluploadError.code === plupload[ key ] ) { 451 message = Uploader.errorMap[ key ]; 452 453 if ( typeof message === 'function' ) { 454 message = message( pluploadError.file, pluploadError ); 455 } 456 457 break; 458 } 459 } 460 461 error( message, pluploadError, pluploadError.file ); 462 up.refresh(); 463 }); 464 465 }; 466 467 // Adds the 'defaults' and 'browser' properties. 468 $.extend( Uploader, _wpPluploadSettings ); 469 470 Uploader.uuid = 0; 471 472 // Map Plupload error codes to user friendly error messages. 473 Uploader.errorMap = { 474 'FAILED': pluploadL10n.upload_failed, 475 'FILE_EXTENSION_ERROR': pluploadL10n.invalid_filetype, 476 'IMAGE_FORMAT_ERROR': pluploadL10n.not_an_image, 477 'IMAGE_MEMORY_ERROR': pluploadL10n.image_memory_exceeded, 478 'IMAGE_DIMENSIONS_ERROR': pluploadL10n.image_dimensions_exceeded, 479 'GENERIC_ERROR': pluploadL10n.upload_failed, 480 'IO_ERROR': pluploadL10n.io_error, 481 'SECURITY_ERROR': pluploadL10n.security_error, 482 483 'FILE_SIZE_ERROR': function( file ) { 484 return pluploadL10n.file_exceeds_size_limit.replace( '%s', file.name ); 485 }, 486 487 'HTTP_ERROR': function( file ) { 488 if ( file.type && file.type.indexOf( 'image/' ) === 0 ) { 489 return pluploadL10n.http_error_image; 490 } 491 492 return pluploadL10n.http_error; 493 }, 494 }; 495 496 $.extend( Uploader.prototype, /** @lends wp.Uploader.prototype */{ 497 /** 498 * Acts as a shortcut to extending the uploader's multipart_params object. 499 * 500 * param( key ) 501 * Returns the value of the key. 502 * 503 * param( key, value ) 504 * Sets the value of a key. 505 * 506 * param( map ) 507 * Sets values for a map of data. 508 */ 509 param: function( key, value ) { 510 if ( arguments.length === 1 && typeof key === 'string' ) { 511 return this.uploader.settings.multipart_params[ key ]; 512 } 513 514 if ( arguments.length > 1 ) { 515 this.uploader.settings.multipart_params[ key ] = value; 516 } else { 517 $.extend( this.uploader.settings.multipart_params, key ); 518 } 519 }, 520 521 /** 522 * Make a few internal event callbacks available on the wp.Uploader object 523 * to change the Uploader internals if absolutely necessary. 524 */ 525 init: function() {}, 526 error: function() {}, 527 success: function() {}, 528 added: function() {}, 529 progress: function() {}, 530 complete: function() {}, 531 refresh: function() { 532 var node, attached, container, id; 533 534 if ( this.browser ) { 535 node = this.browser[0]; 536 537 // Check if the browser node is in the DOM. 538 while ( node ) { 539 if ( node === document.body ) { 540 attached = true; 541 break; 542 } 543 node = node.parentNode; 544 } 545 546 /* 547 * If the browser node is not attached to the DOM,
548 * use a temporary container to house it, as the browser button shims 549 * require the button to exist in the DOM at all times. 550 */ 551 if ( ! attached ) { 552 id = 'wp-uploader-browser-' + this.uploader.id; 553 554 container = $( '#' + id ); 555 if ( ! container.length ) { 556 container = $('<div class="wp-uploader-browser" />').css({ 557 position: 'fixed', 558 top: '-1000px', 559 left: '-1000px', 560 height: 0, 561 width: 0 562 }).attr( 'id', 'wp-uploader-browser-' + this.uploader.id ).appendTo('body'); 563 } 564 565 container.append( this.browser ); 566 } 567 } 568 569 this.uploader.refresh(); 570 } 571 }); 572 573 // Create a collection of attachments in the upload queue, 574 // so that other modules can track and display upload progress. 575 Uploader.queue = new wp.media.model.Attachments( [], { query: false }); 576 577 // Create a collection to collect errors incurred while attempting upload. 578 Uploader.errors = new Backbone.Collection(); 579 580 exports.Uploader = Uploader; 581})( wp, jQuery );
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.