Mini Shell

/* global pluploadL10n, plupload, _wpPluploadSettings, JSON */

window.wp = window.wp || {};

( function ( exports, $ ) {
	var Uploader, vp;

	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.
	 *
	 * @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 =
				navigator.userAgent.indexOf( 'Trident/' ) !== -1 ||
				navigator.userAgent.indexOf( 'MSIE ' ) !== -1,
			elements = {
				container: 'container',
				browser: 'browse_button',
				dropzone: 'drop_element',
			},
			key,
			error;

		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 ( $.isFunction( this[ key ] ) ) {
				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;
		}

		// Make sure flash sends cookies (seems in IE it does without switching to urlstream mode)
		if (
			! isIE &&
			'flash' === plupload.predictRuntime( this.plupload ) &&
			( ! this.plupload.required_features ||
				! this.plupload.required_features.hasOwnProperty( 'send_binary_string' ) )
		) {
			this.plupload.required_features = this.plupload.required_features || {};
			this.plupload.required_features.send_binary_string = true;
		}

		// 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;

		// Make sure that the VideoPress object is available
		if ( typeof exports.VideoPress !== 'undefined' ) {
			vp = exports.VideoPress;
		} else {
			window.console &&
				window.console.error( 'The VideoPress object was not loaded. Errors may occur.' );
		}

		/**
		 * 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
		 * @param  {object}        data
		 * @param  {plupload.File} file     File that was uploaded.
		 */
		error = function ( message, data, file ) {
			if ( file.attachment ) {
				file.attachment.destroy();
			}

			Uploader.errors.unshift( {
				message: message || pluploadL10n.default_error,
				data: data,
				file: file,
			} );

			self.error( message, data, file );
		};

		/**
		 * 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.bind( 'dragover.wp-uploader', function () {
				if ( timer ) {
					clearTimeout( timer );
				}

				if ( active ) {
					return;
				}

				dropzone.trigger( 'dropzone:enter' ).addClass( 'drag-over' );
				active = true;
			} );

			dropzone.bind( '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 );
			// If HTML5 mode, hide the auto-created file container.
			$( '#' + this.uploader.id + '_html5_container' ).hide();
		}

		/**
		 * After files were filtered and added to the queue, create a model for each.
		 *
		 * @event FilesAdded
		 * @param {plupload.Uploader} uploader 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;
				}

				// 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|webp)$/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} uploader 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 ) {
			var complete;

			try {
				response = JSON.parse( response.response );
			} catch ( e ) {
				return error( pluploadL10n.default_error, e, file );
			}

			if ( typeof response.media !== 'undefined' ) {
				response = vp.handleRestApiResponse( response, file );
			} else {
				response = vp.handleStandardResponse( response, file );
			}

			_.each( [ 'file', 'loaded', 'size', 'percent' ], function ( key ) {
				file.attachment.unset( key );
			} );

			file.attachment.set( _.extend( response.data, { uploading: false } ) );
			var att = wp.media.model.Attachment.get( response.data.id, file.attachment );

			/* Once the new "empty" attachment is added to the collection above, check if it exists on the server, then set the new data.
			 * If it happens to not exist on the server yet (xmlrpc delayed or not working), then the empty media item will still be on the page,
			 *  so no need to do any special error handling here on the sync.
			 *
			 * This is only necessary if `vp.handleRestApiResponse` was used above, as it is what returns the "empty" media item.
			 */
			if ( typeof response.media !== 'undefined' ) {
				att.sync( 'read' ).then( function ( data ) {
					wp.media.model.Attachment.get( att.id ).set( data );
				} );
			}

			complete = Uploader.queue.all( function ( attachment ) {
				return ! attachment.get( 'uploading' );
			} );

			if ( complete ) {
				vp && vp.resetToOriginalOptions( up );
				Uploader.queue.reset();
			}

			self.success( file.attachment );
		} );

		/**
		 * When plupload surfaces an error, send it to the error handler.
		 *
		 * @param {plupload.Uploader} uploader Uploader instance.
		 * @param {Object}            error    Contains code, message and sometimes file and other details.
		 */
		this.uploader.bind( 'Error', function ( up, pluploadError ) {
			var message = pluploadL10n.default_error;

			// Check for plupload errors.
			for ( var key in Uploader.errorMap ) {
				if ( pluploadError.code === plupload[ key ] ) {
					message = Uploader.errorMap[ key ];

					if ( _.isFunction( message ) ) {
						message = message( pluploadError.file, pluploadError );
					}

					break;
				}
			}

			if ( 'response' in pluploadError ) {
				try {
					var pluploadResponseObject = JSON.parse( pluploadError.response );
					if ( typeof pluploadResponseObject === 'object' ) {
						if (
							'errors' in pluploadResponseObject &&
							typeof pluploadResponseObject.errors === 'object'
						) {
							pluploadResponseObject = pluploadResponseObject.errors.shift();
						}

						if ( 'message' in pluploadResponseObject ) {
							message = pluploadResponseObject.message;
						}
					}
				} catch ( e ) {
					// Do nothing ...
				}
			}

			error( message, pluploadError, pluploadError.file );
			vp && vp.resetToOriginalOptions( up );
			up.refresh();
		} );

		/**
		 * Add in a way for the uploader to reset itself when uploads are complete.
		 */
		this.uploader.bind( 'UploadComplete', function ( up ) {
			vp && vp.resetToOriginalOptions( up );
		} );

		/**
		 * Before we upload, check to see if this file is a videopress upload, if so, set new options and save the old ones.
		 */
		this.uploader.bind( 'BeforeUpload', function ( up, file ) {
			if ( typeof file.videopress !== 'undefined' ) {
				vp.originalOptions.url = up.getOption( 'url' );
				vp.originalOptions.multipart_params = up.getOption( 'multipart_params' );
				vp.originalOptions.file_data_name = up.getOption( 'file_data_name' );

				up.setOption( 'file_data_name', 'media[]' );
				up.setOption( 'url', file.videopress.upload_action_url );
				up.setOption( 'headers', {
					Authorization:
						'X_UPLOAD_TOKEN token="' +
						file.videopress.upload_token +
						'" blog_id="' +
						file.videopress.upload_blog_id +
						'"',
				} );
			}
		} );
	};

	// 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,
		HTTP_ERROR: pluploadL10n.http_error,
		SECURITY_ERROR: pluploadL10n.security_error,

		FILE_SIZE_ERROR: function ( file ) {
			return pluploadL10n.file_exceeds_size_limit.replace( '%s', file.name );
		},
	};

	$.extend( 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 );