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