[WordPress] A custom implementation of the WordPress media uploader.

acme-functions.php

<?php 

add_action( 'admin_enqueue_scripts', 'acme_register_media_uploader_scripts' );
/**
 * Provides an example for how to create a custom implementation of the WordPress
 * Media Uploader.
 *
 * Note that this implementation will display the uploader on every dashboard page,
 * so you'll need to update the JavaScript to properly setup a handler when a
 * specific element is clicked.
 *
 * You may also want to only add these scripts on the pages that need them rather
 * than on every page of the dashboard.
 *
 * @package    Acme
 * @since      1.0.0
 */
function acme_register_media_uploader_scripts() {

	wp_enqueue_media();

	wp_enqueue_script(
		'acme-media-uploader',
		get_template_directory_uri() . '/js/acme-media-uploader.js'
	);

}

acme-media-uploader-advanced.js

(function( $ ) {
	'use strict';

	/* global wp, console */

	var file_frame, image_data;

	$(function() {

		/**
		 * If an instance of file_frame already exists, then we can open it
		 * rather than creating a new instance.
		 */
		if ( undefined !== file_frame ) {

			file_frame.open();
			return;

		}

		/**
		 * If we're this far, then an instance does not exist, so we need to
		 * create our own.
		 *
		 * Here, use the wp.media library to define the settings of the Media
		 * Uploader. We're opting to use the 'post' frame which is a template
		 * defined in WordPress core and are initializing the file frame
		 * with the 'insert' state.
		 *
		 * We're also not allowing the user to select more than one image.
		 */
		file_frame = wp.media.frames.file_frame = wp.media({
			frame:    'post',
			state:    'insert',
			multiple: false
		});

		/**
		 * Setup an event handler for what to do when an image has been
		 * selected.
		 *
		 * Since we're using the 'view' state when initializing
		 * the file_frame, we need to make sure that the handler is attached
		 * to the insert event.
		 */
		file_frame.on( 'insert', function() {

			image_data = file_frame.state().get( 'selection' ).first().toJSON();
			for ( var image_property in image_data ) {

				/**
				 * Here, you have access to all of the properties
				 * provided by WordPress to the selected image.
				 *
				 * This is generally where you take the data and so whatever
				 * it is that you want to do.
				 *
				 * For purposes of example, we're just going to dump the
				 * properties into the console.
				 */
				console.log( image_property + ': ' + image_data[ image_property ] );

			}

		});

		// Now display the actual file_frame
		file_frame.open();

	});

})( jQuery );

acme-media-uploader.js

(function( $ ) {
	'use strict';

	/* global wp, console */

	var file_frame, image_data;

	$(function() {

		/**
		 * If an instance of file_frame already exists, then we can open it
		 * rather than creating a new instance.
		 */
		if ( undefined !== file_frame ) {

			file_frame.open();
			return;

		}

		/**
		 * If we're this far, then an instance does not exist, so we need to
		 * create our own.
		 *
		 * Here, use the wp.media library to define the settings of the Media
		 * Uploader implementation by setting the title and the upload button
		 * text. We're also not allowing the user to select more than one image.
		 */
		file_frame = wp.media.frames.file_frame = wp.media({
			title:    "Insert Media",    // For production, this needs i18n.
			button:   {
				text: "Upload Image"     // For production, this needs i18n.
			},
			multiple: false
		});

		/**
		 * Setup an event handler for what to do when an image has been
		 * selected.
		 */
		file_frame.on( 'select', function() {

			image_data = file_frame.state().get( 'selection' ).first().toJSON();
			for ( var image_property in image_data ) {

				/**
				 * Here, you have access to all of the properties
				 * provided by WordPress to the selected image.
				 *
				 * This is generally where you take the data and so whatever
				 * it is that you want to do.
				 *
				 * For purposes of example, we're just going to dump the
				 * properties into the console.
				 */
				console.log( image_property + ': ' + image_data[ image_property ] );

			}

		});

		// Now display the actual file_frame
		file_frame.open();

	});

})( jQuery );