Custom WordPress Media Uploader

gistfile1.js

(function ($) {
	"use strict";
	/*global wp,jQuery */
	
	var CustomGalleryEdit,CustomFrame;
	
	function customClasses() {
		var media = wp.media;
		var l10n = media.view.l10n;
		
		CustomGalleryEdit = wp.media.controller.GalleryEdit.extend({
			gallerySettings: function( browser ) {
				if ( ! this.get('displaySettings') ) {
					return;
				}

				var library = this.get('library');

				if ( ! library || ! browser ) {
					return;
				}

				browser.toolbar.set( 'reverse', {
					text:     l10n.reverseOrder,
					priority: 80,

					click: function() {
						library.reset( library.toArray().reverse() );
					}
				});
			}
		});
		
		CustomFrame = wp.media.view.MediaFrame.Post.extend({
			galleryMenu: function( view ) {
			},
			createStates: function() {
				var options = this.options;
				// custom frame has only 2 states: gallery edit/add
				this.states.add([
					new CustomGalleryEdit({
						library: options.selection,
						editing: true,
						requires: { selection: false },
						menu:    'gallery'
					}),
					new media.controller.GalleryAdd()
				]);
			},
			galleryEditToolbar: function() {
				try {
					var updateGallery = l10n.updateGallery;
					// change the button label
					l10n.updateGallery = 'Save Gallery';
					// call parent method
					media.view.MediaFrame.Post.prototype.galleryEditToolbar.apply(this,arguments);
					// change the button behaviour so that it would allow us to save an empty gallery
					this.toolbar.get().options.items.insert.requires.library = false;
					l10n.updateGallery = updateGallery;
				} catch (x) {

				}
			}
		});
		
	}
	
	function getWorkFlow(selection) {
		var attributes = {
				state:      'gallery-edit',
				editing:    true,
				multiple:   true
			};
		
		if (typeof selection != 'undefined' && selection) {
			attributes.selection = selection;
		}
		return new CustomFrame(attributes);
	}
	
	function init() {
		if (window.wp && window.wp.media) {
			customClasses();
		}
	}
	
	$(init);
	
	
	// the following functions can be used to interact with the custom media uploader
	
	// input field where the gallery images ids are store as comma separated list
	var store = $('input');
	
	// the media uploader
	var workflow = false;
	
	// selection object which list gallery images as collection
	var selection;
	
	// opens the dialog
	function open() {
		if (!selection) {
			fetch();
		}
		
		if (workflow) {
			workflow.off('update',update);
			workflow.dispose();
		}
		
		workflow = getWorkFlow(selection);
		workflow.on('update',update);
		workflow.open();
	}
	
	// create selection collection
	function fetch() {
		var value = store.val();
		
		if (!value) {
			selection = [];
			return;
		} 
		
		var shortcode = new wp.shortcode({
				tag:    "gallery",
				attrs:   { ids: value },
				type:   "single"
			});
		
		var attachments = wp.media.gallery.attachments( shortcode );
		
		selection = new wp.media.model.Selection( attachments.models, {
			props:    attachments.props.toJSON(),
			multiple: true
		});
		
		selection.gallery = attachments.gallery;
		selection.more().done( function() {
			// Break ties with the query.
			selection.props.set({ query: false });
			selection.unmirror();
			selection.props.unset("orderby");
		});
		
	}
	
	// retrieve list of gallery images and stores them
	function update() {
		var library = workflow.states.get('gallery-edit').get('library');
		var ids = library.pluck('id');
		var value = (typeof ids === 'object') ? ids.join(',') : '';
		store.val(value);
		selection = false;
	}
	
}(jQuery));