Skip to content

Instantly share code, notes, and snippets.

@thsur

thsur/usage.js

Last active August 29, 2015 14:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save thsur/49e7b2b54d3d11b9f1d0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save thsur/49e7b2b54d3d11b9f1d0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. nosurs revised this gist Jun 14, 2014. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions wordpress-media-uploader.js
    View file
    Original file line number Diff line number Diff line change
    @@ -26,6 +26,7 @@

    title: 'Select a file',
    button: { text: 'Select' },
    frame: 'select',
    multiple: false
    },

  2. nosurs revised this gist Jun 14, 2014. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion usage.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,7 @@
    jQuery(document).ready(function($){

    // Configure

    var config = {

    // Overwrite default settings
    @@ -20,7 +22,7 @@ jQuery(document).ready(function($){
    }
    }

    // Add first instance
    // Add

    $('.my-container-element').WPMediaUploader(config);
    }
  3. nosurs renamed this gist Jun 14, 2014. 1 changed file with 0 additions and 0 deletions.
    0 plugin.js → wordpress-media-uploader.js
    View file
    File renamed without changes.
  4. nosurs revised this gist Jun 14, 2014. 1 changed file with 6 additions and 6 deletions.
    12 changes: 6 additions & 6 deletions plugin.js
    View file
    Original file line number Diff line number Diff line change
    @@ -92,15 +92,15 @@

    $.fn[ pluginName ] = function (options) {

    this.each(function() {
    this.each(function() {

    if (!$.data(this, "plugin_" + pluginName)) {
    if (!$.data(this, "plugin_" + pluginName)) {

    $.data(this, "plugin_" + pluginName, new Plugin(this, options));
    }
    });
    $.data(this, "plugin_" + pluginName, new Plugin(this, options));
    }
    });

    return this;
    return this;
    };

    })(jQuery, window, document);
  5. nosurs created this gist Jun 14, 2014.
    107 changes: 107 additions & 0 deletions plugin.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,107 @@
    /**
    * WPMediaUploader
    *
    * This is a blueprint of how to get hold of WordPress' media upload screen to use it inside
    * a plugin or a custom post type or whatever suits you (but beware that in some places you
    * need to make a PHP call to wp_enqueue_media(), see WordPress' Codex).
    *
    * For a general overview, see:
    * http://stackoverflow.com/questions/13847714/wordpress-3-5-custom-media-upload-for-your-theme-options
    *
    * For a generic approach, see:
    * https://github.com/thomasgriffin/New-Media-Image-Uploader/blob/master/js/media.js
    *
    * For using an uploader with a specific post id & other helpful insights, see:
    * see http://mikejolley.com/2012/12/using-the-new-wordpress-3-5-media-uploader-in-plugins/
    *
    * Plugin itself is based on http://jqueryboilerplate.com
    */

    (function ( $, window, document, undefined ) {

    var pluginName = 'WPMediaUploader';
    var defaults = {

    wpmedia: {

    title: 'Select a file',
    button: { text: 'Select' },
    multiple: false
    },

    callback: null
    };

    // The actual plugin constructor

    function Plugin (element, options) {

    this.element = element;
    this._name = pluginName;

    this._defaults = defaults;
    this.settings = $.extend(true, {}, defaults, options);

    this.init();
    }

    // Avoid Plugin.prototype conflicts

    $.extend(Plugin.prototype, {

    init: function () {

    this.setup();
    },

    setup: function () {

    var container = $(this.element);
    var scope = this;

    container.on('click', '.upload', function(e) {

    e.preventDefault();

    if (scope.custom_uploader) {

    scope.custom_uploader.open();
    return;
    }

    scope.custom_uploader = wp.media.frames.custom_uploader = wp.media(scope.settings.wpmedia);

    scope.custom_uploader.on('select', function() {

    var attachment = scope.custom_uploader.state().get('selection').first().toJSON();
    var callback = scope.settings.callback;

    if (callback && typeof(callback) === 'function') {

    callback({element: container, attachment: attachment});
    }
    });

    scope.custom_uploader.open();
    });
    }
    });

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations

    $.fn[ pluginName ] = function (options) {

    this.each(function() {

    if (!$.data(this, "plugin_" + pluginName)) {

    $.data(this, "plugin_" + pluginName, new Plugin(this, options));
    }
    });

    return this;
    };

    })(jQuery, window, document);

    26 changes: 26 additions & 0 deletions usage.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    jQuery(document).ready(function($){

    var config = {

    // Overwrite default settings

    wpmedia: {

    button: { text: 'Select!' },
    },

    // Do something when a file has been selected by the user

    callback: function (data) {

    var container = data.element;
    var attachment = data.attachment;

    container.find('.my-input-field').val(attachment.url);
    }
    }

    // Add first instance

    $('.my-container-element').WPMediaUploader(config);
    }