summaryrefslogtreecommitdiffstats
path: root/wp-includes/js/plupload/wp-plupload.js
diff options
context:
space:
mode:
Diffstat (limited to 'wp-includes/js/plupload/wp-plupload.js')
-rw-r--r--wp-includes/js/plupload/wp-plupload.js576
1 files changed, 576 insertions, 0 deletions
diff --git a/wp-includes/js/plupload/wp-plupload.js b/wp-includes/js/plupload/wp-plupload.js
new file mode 100644
index 0000000..0fdebf7
--- /dev/null
+++ b/wp-includes/js/plupload/wp-plupload.js
@@ -0,0 +1,576 @@
+/* global pluploadL10n, plupload, _wpPluploadSettings */
+
+/**
+ * @namespace wp
+ */
+window.wp = window.wp || {};
+
+( function( exports, $ ) {
+ var Uploader;
+
+ if ( typeof _wpPluploadSettings === 'undefined' ) {
+ return;
+ }
+
+ /**
+ * A WordPress uploader.
+ *
+ * The Plupload library provides cross-browser uploader UI integration.
+ * This object bridges the Plupload API to integrate uploads into the
+ * WordPress back end and the WordPress media experience.
+ *
+ * @class
+ * @memberOf wp
+ * @alias wp.Uploader
+ *
+ * @param {object} options The options passed to the new plupload instance.
+ * @param {object} options.container The id of uploader container.
+ * @param {object} options.browser The id of button to trigger the file select.
+ * @param {object} options.dropzone The id of file drop target.
+ * @param {object} options.plupload An object of parameters to pass to the plupload instance.
+ * @param {object} options.params An object of parameters to pass to $_POST when uploading the file.
+ * Extends this.plupload.multipart_params under the hood.
+ */
+ Uploader = function( options ) {
+ var self = this,
+ isIE, // Not used, back-compat.
+ elements = {
+ container: 'container',
+ browser: 'browse_button',
+ dropzone: 'drop_element'
+ },
+ tryAgainCount = {},
+ tryAgain,
+ key,
+ error,
+ fileUploaded;
+
+ this.supports = {
+ upload: Uploader.browser.supported
+ };
+
+ this.supported = this.supports.upload;
+
+ if ( ! this.supported ) {
+ return;
+ }
+
+ // Arguments to send to pluplad.Uploader().
+ // Use deep extend to ensure that multipart_params and other objects are cloned.
+ this.plupload = $.extend( true, { multipart_params: {} }, Uploader.defaults );
+ this.container = document.body; // Set default container.
+
+ /*
+ * Extend the instance with options.
+ *
+ * Use deep extend to allow options.plupload to override individual
+ * default plupload keys.
+ */
+ $.extend( true, this, options );
+
+ // Proxy all methods so this always refers to the current instance.
+ for ( key in this ) {
+ if ( typeof this[ key ] === 'function' ) {
+ this[ key ] = $.proxy( this[ key ], this );
+ }
+ }
+
+ // Ensure all elements are jQuery elements and have id attributes,
+ // then set the proper plupload arguments to the ids.
+ for ( key in elements ) {
+ if ( ! this[ key ] ) {
+ continue;
+ }
+
+ this[ key ] = $( this[ key ] ).first();
+
+ if ( ! this[ key ].length ) {
+ delete this[ key ];
+ continue;
+ }
+
+ if ( ! this[ key ].prop('id') ) {
+ this[ key ].prop( 'id', '__wp-uploader-id-' + Uploader.uuid++ );
+ }
+
+ this.plupload[ elements[ key ] ] = this[ key ].prop('id');
+ }
+
+ // If the uploader has neither a browse button nor a dropzone, bail.
+ if ( ! ( this.browser && this.browser.length ) && ! ( this.dropzone && this.dropzone.length ) ) {
+ return;
+ }
+
+ // Initialize the plupload instance.
+ this.uploader = new plupload.Uploader( this.plupload );
+ delete this.plupload;
+
+ // Set default params and remove this.params alias.
+ this.param( this.params || {} );
+ delete this.params;
+
+ /**
+ * Attempt to create image sub-sizes when an image was uploaded successfully
+ * but the server responded with HTTP 5xx error.
+ *
+ * @since 5.3.0
+ *
+ * @param {string} message Error message.
+ * @param {object} data Error data from Plupload.
+ * @param {plupload.File} file File that was uploaded.
+ */
+ tryAgain = function( message, data, file ) {
+ var times, id;
+
+ if ( ! data || ! data.responseHeaders ) {
+ error( pluploadL10n.http_error_image, data, file, 'no-retry' );
+ return;
+ }
+
+ id = data.responseHeaders.match( /x-wp-upload-attachment-id:\s*(\d+)/i );
+
+ if ( id && id[1] ) {
+ id = id[1];
+ } else {
+ error( pluploadL10n.http_error_image, data, file, 'no-retry' );
+ return;
+ }
+
+ times = tryAgainCount[ file.id ];
+
+ if ( times && times > 4 ) {
+ /*
+ * The file may have been uploaded and attachment post created,
+ * but post-processing and resizing failed...
+ * Do a cleanup then tell the user to scale down the image and upload it again.
+ */
+ $.ajax({
+ type: 'post',
+ url: ajaxurl,
+ dataType: 'json',
+ data: {
+ action: 'media-create-image-subsizes',
+ _wpnonce: _wpPluploadSettings.defaults.multipart_params._wpnonce,
+ attachment_id: id,
+ _wp_upload_failed_cleanup: true,
+ }
+ });
+
+ error( message, data, file, 'no-retry' );
+ return;
+ }
+
+ if ( ! times ) {
+ tryAgainCount[ file.id ] = 1;
+ } else {
+ tryAgainCount[ file.id ] = ++times;
+ }
+
+ // Another request to try to create the missing image sub-sizes.
+ $.ajax({
+ type: 'post',
+ url: ajaxurl,
+ dataType: 'json',
+ data: {
+ action: 'media-create-image-subsizes',
+ _wpnonce: _wpPluploadSettings.defaults.multipart_params._wpnonce,
+ attachment_id: id,
+ }
+ }).done( function( response ) {
+ if ( response.success ) {
+ fileUploaded( self.uploader, file, response );
+ } else {
+ if ( response.data && response.data.message ) {
+ message = response.data.message;
+ }
+
+ error( message, data, file, 'no-retry' );
+ }
+ }).fail( function( jqXHR ) {
+ // If another HTTP 5xx error, try try again...
+ if ( jqXHR.status >= 500 && jqXHR.status < 600 ) {
+ tryAgain( message, data, file );
+ return;
+ }
+
+ error( message, data, file, 'no-retry' );
+ });
+ }
+
+ /**
+ * Custom error callback.
+ *
+ * Add a new error to the errors collection, so other modules can track
+ * and display errors. @see wp.Uploader.errors.
+ *
+ * @param {string} message Error message.
+ * @param {object} data Error data from Plupload.
+ * @param {plupload.File} file File that was uploaded.
+ * @param {string} retry Whether to try again to create image sub-sizes. Passing 'no-retry' will prevent it.
+ */
+ error = function( message, data, file, retry ) {
+ var isImage = file.type && file.type.indexOf( 'image/' ) === 0,
+ status = data && data.status;
+
+ // If the file is an image and the error is HTTP 5xx try to create sub-sizes again.
+ if ( retry !== 'no-retry' && isImage && status >= 500 && status < 600 ) {
+ tryAgain( message, data, file );
+ return;
+ }
+
+ if ( file.attachment ) {
+ file.attachment.destroy();
+ }
+
+ Uploader.errors.unshift({
+ message: message || pluploadL10n.default_error,
+ data: data,
+ file: file
+ });
+
+ self.error( message, data, file );
+ };
+
+ /**
+ * After a file is successfully uploaded, update its model.
+ *
+ * @param {plupload.Uploader} up Uploader instance.
+ * @param {plupload.File} file File that was uploaded.
+ * @param {Object} response Object with response properties.
+ */
+ fileUploaded = function( up, file, response ) {
+ var complete;
+
+ // Remove the "uploading" UI elements.
+ _.each( ['file','loaded','size','percent'], function( key ) {
+ file.attachment.unset( key );
+ } );
+
+ file.attachment.set( _.extend( response.data, { uploading: false } ) );
+
+ wp.media.model.Attachment.get( response.data.id, file.attachment );
+
+ complete = Uploader.queue.all( function( attachment ) {
+ return ! attachment.get( 'uploading' );
+ });
+
+ if ( complete ) {
+ Uploader.queue.reset();
+ }
+
+ self.success( file.attachment );
+ }
+
+ /**
+ * After the Uploader has been initialized, initialize some behaviors for the dropzone.
+ *
+ * @param {plupload.Uploader} uploader Uploader instance.
+ */
+ this.uploader.bind( 'init', function( uploader ) {
+ var timer, active, dragdrop,
+ dropzone = self.dropzone;
+
+ dragdrop = self.supports.dragdrop = uploader.features.dragdrop && ! Uploader.browser.mobile;
+
+ // Generate drag/drop helper classes.
+ if ( ! dropzone ) {
+ return;
+ }
+
+ dropzone.toggleClass( 'supports-drag-drop', !! dragdrop );
+
+ if ( ! dragdrop ) {
+ return dropzone.unbind('.wp-uploader');
+ }
+
+ // 'dragenter' doesn't fire correctly, simulate it with a limited 'dragover'.
+ dropzone.on( 'dragover.wp-uploader', function() {
+ if ( timer ) {
+ clearTimeout( timer );
+ }
+
+ if ( active ) {
+ return;
+ }
+
+ dropzone.trigger('dropzone:enter').addClass('drag-over');
+ active = true;
+ });
+
+ dropzone.on('dragleave.wp-uploader, drop.wp-uploader', function() {
+ /*
+ * Using an instant timer prevents the drag-over class
+ * from being quickly removed and re-added when elements
+ * inside the dropzone are repositioned.
+ *
+ * @see https://core.trac.wordpress.org/ticket/21705
+ */
+ timer = setTimeout( function() {
+ active = false;
+ dropzone.trigger('dropzone:leave').removeClass('drag-over');
+ }, 0 );
+ });
+
+ self.ready = true;
+ $(self).trigger( 'uploader:ready' );
+ });
+
+ this.uploader.bind( 'postinit', function( up ) {
+ up.refresh();
+ self.init();
+ });
+
+ this.uploader.init();
+
+ if ( this.browser ) {
+ this.browser.on( 'mouseenter', this.refresh );
+ } else {
+ this.uploader.disableBrowse( true );
+ }
+
+ $( self ).on( 'uploader:ready', function() {
+ $( '.moxie-shim-html5 input[type="file"]' )
+ .attr( {
+ tabIndex: '-1',
+ 'aria-hidden': 'true'
+ } );
+ } );
+
+ /**
+ * After files were filtered and added to the queue, create a model for each.
+ *
+ * @param {plupload.Uploader} up Uploader instance.
+ * @param {Array} files Array of file objects that were added to queue by the user.
+ */
+ this.uploader.bind( 'FilesAdded', function( up, files ) {
+ _.each( files, function( file ) {
+ var attributes, image;
+
+ // Ignore failed uploads.
+ if ( plupload.FAILED === file.status ) {
+ return;
+ }
+
+ if ( file.type === 'image/heic' && up.settings.heic_upload_error ) {
+ // Show error but do not block uploading.
+ Uploader.errors.unshift({
+ message: pluploadL10n.unsupported_image,
+ data: {},
+ file: file
+ });
+ } else if ( file.type === 'image/webp' && up.settings.webp_upload_error ) {
+ // Disallow uploading of WebP images if the server cannot edit them.
+ error( pluploadL10n.noneditable_image, {}, file, 'no-retry' );
+ up.removeFile( file );
+ return;
+ }
+
+ // Generate attributes for a new `Attachment` model.
+ attributes = _.extend({
+ file: file,
+ uploading: true,
+ date: new Date(),
+ filename: file.name,
+ menuOrder: 0,
+ uploadedTo: wp.media.model.settings.post.id
+ }, _.pick( file, 'loaded', 'size', 'percent' ) );
+
+ // Handle early mime type scanning for images.
+ image = /(?:jpe?g|png|gif)$/i.exec( file.name );
+
+ // For images set the model's type and subtype attributes.
+ if ( image ) {
+ attributes.type = 'image';
+
+ // `jpeg`, `png` and `gif` are valid subtypes.
+ // `jpg` is not, so map it to `jpeg`.
+ attributes.subtype = ( 'jpg' === image[0] ) ? 'jpeg' : image[0];
+ }
+
+ // Create a model for the attachment, and add it to the Upload queue collection
+ // so listeners to the upload queue can track and display upload progress.
+ file.attachment = wp.media.model.Attachment.create( attributes );
+ Uploader.queue.add( file.attachment );
+
+ self.added( file.attachment );
+ });
+
+ up.refresh();
+ up.start();
+ });
+
+ this.uploader.bind( 'UploadProgress', function( up, file ) {
+ file.attachment.set( _.pick( file, 'loaded', 'percent' ) );
+ self.progress( file.attachment );
+ });
+
+ /**
+ * After a file is successfully uploaded, update its model.
+ *
+ * @param {plupload.Uploader} up Uploader instance.
+ * @param {plupload.File} file File that was uploaded.
+ * @param {Object} response Object with response properties.
+ * @return {mixed}
+ */
+ this.uploader.bind( 'FileUploaded', function( up, file, response ) {
+
+ try {
+ response = JSON.parse( response.response );
+ } catch ( e ) {
+ return error( pluploadL10n.default_error, e, file );
+ }
+
+ if ( ! _.isObject( response ) || _.isUndefined( response.success ) ) {
+ return error( pluploadL10n.default_error, null, file );
+ } else if ( ! response.success ) {
+ return error( response.data && response.data.message, response.data, file );
+ }
+
+ // Success. Update the UI with the new attachment.
+ fileUploaded( up, file, response );
+ });
+
+ /**
+ * When plupload surfaces an error, send it to the error handler.
+ *
+ * @param {plupload.Uploader} up Uploader instance.
+ * @param {Object} pluploadError Contains code, message and sometimes file and other details.
+ */
+ this.uploader.bind( 'Error', function( up, pluploadError ) {
+ var message = pluploadL10n.default_error,
+ key;
+
+ // Check for plupload errors.
+ for ( key in Uploader.errorMap ) {
+ if ( pluploadError.code === plupload[ key ] ) {
+ message = Uploader.errorMap[ key ];
+
+ if ( typeof message === 'function' ) {
+ message = message( pluploadError.file, pluploadError );
+ }
+
+ break;
+ }
+ }
+
+ error( message, pluploadError, pluploadError.file );
+ up.refresh();
+ });
+
+ };
+
+ // Adds the 'defaults' and 'browser' properties.
+ $.extend( Uploader, _wpPluploadSettings );
+
+ Uploader.uuid = 0;
+
+ // Map Plupload error codes to user friendly error messages.
+ Uploader.errorMap = {
+ 'FAILED': pluploadL10n.upload_failed,
+ 'FILE_EXTENSION_ERROR': pluploadL10n.invalid_filetype,
+ 'IMAGE_FORMAT_ERROR': pluploadL10n.not_an_image,
+ 'IMAGE_MEMORY_ERROR': pluploadL10n.image_memory_exceeded,
+ 'IMAGE_DIMENSIONS_ERROR': pluploadL10n.image_dimensions_exceeded,
+ 'GENERIC_ERROR': pluploadL10n.upload_failed,
+ 'IO_ERROR': pluploadL10n.io_error,
+ 'SECURITY_ERROR': pluploadL10n.security_error,
+
+ 'FILE_SIZE_ERROR': function( file ) {
+ return pluploadL10n.file_exceeds_size_limit.replace( '%s', file.name );
+ },
+
+ 'HTTP_ERROR': function( file ) {
+ if ( file.type && file.type.indexOf( 'image/' ) === 0 ) {
+ return pluploadL10n.http_error_image;
+ }
+
+ return pluploadL10n.http_error;
+ },
+ };
+
+ $.extend( Uploader.prototype, /** @lends wp.Uploader.prototype */{
+ /**
+ * Acts as a shortcut to extending the uploader's multipart_params object.
+ *
+ * param( key )
+ * Returns the value of the key.
+ *
+ * param( key, value )
+ * Sets the value of a key.
+ *
+ * param( map )
+ * Sets values for a map of data.
+ */
+ param: function( key, value ) {
+ if ( arguments.length === 1 && typeof key === 'string' ) {
+ return this.uploader.settings.multipart_params[ key ];
+ }
+
+ if ( arguments.length > 1 ) {
+ this.uploader.settings.multipart_params[ key ] = value;
+ } else {
+ $.extend( this.uploader.settings.multipart_params, key );
+ }
+ },
+
+ /**
+ * Make a few internal event callbacks available on the wp.Uploader object
+ * to change the Uploader internals if absolutely necessary.
+ */
+ init: function() {},
+ error: function() {},
+ success: function() {},
+ added: function() {},
+ progress: function() {},
+ complete: function() {},
+ refresh: function() {
+ var node, attached, container, id;
+
+ if ( this.browser ) {
+ node = this.browser[0];
+
+ // Check if the browser node is in the DOM.
+ while ( node ) {
+ if ( node === document.body ) {
+ attached = true;
+ break;
+ }
+ node = node.parentNode;
+ }
+
+ /*
+ * If the browser node is not attached to the DOM,
+ * use a temporary container to house it, as the browser button shims
+ * require the button to exist in the DOM at all times.
+ */
+ if ( ! attached ) {
+ id = 'wp-uploader-browser-' + this.uploader.id;
+
+ container = $( '#' + id );
+ if ( ! container.length ) {
+ container = $('<div class="wp-uploader-browser" />').css({
+ position: 'fixed',
+ top: '-1000px',
+ left: '-1000px',
+ height: 0,
+ width: 0
+ }).attr( 'id', 'wp-uploader-browser-' + this.uploader.id ).appendTo('body');
+ }
+
+ container.append( this.browser );
+ }
+ }
+
+ this.uploader.refresh();
+ }
+ });
+
+ // Create a collection of attachments in the upload queue,
+ // so that other modules can track and display upload progress.
+ Uploader.queue = new wp.media.model.Attachments( [], { query: false });
+
+ // Create a collection to collect errors incurred while attempting upload.
+ Uploader.errors = new Backbone.Collection();
+
+ exports.Uploader = Uploader;
+})( wp, jQuery );