0

I'm working on plugin that optionally manipulates uploaded content (images). I managed to add some additional fields on "Insert media" popup under "Drop files anywhere to upload" text, but I need to send those parameters with file content to async-upload.php when uploading.

Pre WP v3.3, I've been using this to achive desired results:

jQuery('input:text[name="custom_text"]').keyup(function() {
    wpUploaderInit.multipart_params.custom_text = jQuery(this).val(); 
});
3
  • 1
    Can you post your relevant code, working or not?
    – s_ha_dum
    Feb 26, 2015 at 18:30
  • Pre WP v3.3 I've been using this to achive desired results: jQuery('input:text[name="custom_text"]').keyup(function() { wpUploaderInit.multipart_params.custom_text = jQuery(this).val(); }); Feb 27, 2015 at 9:13
  • Please edit the code into the question rather than post it as a comment, but that isn't really enough code. There isn't enough context. Can you post enough that the problem can be duplicated?
    – s_ha_dum
    Feb 27, 2015 at 17:27

1 Answer 1

1

To send a customer data to the server, do the following

customFileFrame.uploader.options.uploader.params.yourCustomProperty = 'yourCustomValue';

Where:

yourCustomProperty - parameter name
yourCustomValue - parameter value

processing data from the server

add_action('add_attachment', array($this, 'addAttachmentParama'));

public function addAttachmentParama($post_id){
    if (isset($_REQUEST['yourCustomProperty']) && isset($_REQUEST['action']) && 'upload-attachment' == $_REQUEST['action']) {
        update_post_meta($post_id, 'yourCustomProperty', $_REQUEST['yourCustomProperty']);
     }
 }

Mini Plugin for example

<?php
/*
Plugin Name: ExsempleDimetrodonMediaUploader
Version: 0.0.1
Author: Dimetrodon
License: GPLv2 or later
*/

class ExsempleDimetrodonMediaUploader
{
    private static $instance;

    /**
     * Get (and instantiate, if necessary) the instance of the class
     *
     * @static
     * @return ExsempleDimetrodonMediaUploader
     */
    public static function get_instance(){
        if (!is_a(self::$instance, __CLASS__)) {
            self::$instance = new self();
        }
        return self::$instance;
    }

    private function __clone(){}

    private function __construct(){
        add_shortcode('ExsempleDimetrodonMediaUploader', array($this, 'MediaUploader'));
        add_action('add_attachment', array($this, 'addAttachmentParama'));
    }

    public function addAttachmentParama($post_id){
        if (isset($_REQUEST['yourCustomProperty']) && isset($_REQUEST['action']) && 'upload-attachment' == $_REQUEST['action']) {
            update_post_meta($post_id, 'yourCustomProperty', $_REQUEST['yourCustomProperty']);
        }
    }

    public function MediaUploader()
    {
        wp_enqueue_media();
        ob_start();
        ?>
        <img id="image">
        <button class="image-uploader">Image Uploader</button>

        <script type="text/javascript">
            jQuery(function ($) {
                var customFileFrame;
                $(document).on('click', '.image-uploader', function (event) {
                    if (typeof(customFileFrame) !== "undefined") {
                        customFileFrame.close();
                    }

                    //Create WP media frame.
                    customFileFrame = wp.media.frames.customHeader = wp.media({
                        //Title of media manager frame
                        title: "Select Image",
                        library: {
                            type: 'image'
                        },
                        button: {
                            text: "Select Image"
                        },
                        multiple: false
                    });

                    //Sending of a custom parameters to the server
                    customFileFrame.uploader.options.uploader.params.yourCustomProperty = 'yourCustomValue';

                    //callback for selected image
                    customFileFrame.on('select', function () {
                        var attachment = customFileFrame.state().get('selection').first().toJSON();
                        $('#image').attr('src', attachment.url);
                        //do something with attachment variable, for example attachment.filename
                        //Object:
                        //attachment.alt - image alt
                        //attachment.alt - image alt
                        //attachment.url
                        //attachment.author - author id
                        //attachment.caption
                        //attachment.dateFormatted - date of image uploaded
                        //attachment.description
                        //attachment.editLink - edit link of media
                        //attachment.filename
                        //attachment.height
                        //attachment.icon - don't know WTF?))
                        //attachment.id - id of attachment
                        //attachment.link - public link of attachment, for example ""http://example.com/?attachment_id=115""
                        //attachment.menuOrder
                        //attachment.mime - mime type, for example image/jpeg"
                        //attachment.name - name of attachment file, for example "my-image"
                        //attachment.status - usual is "inherit"
                        //attachment.subtype - "jpeg" if is "jpg"
                        //attachment.title
                        //attachment.type - "image"
                        //attachment.uploadedTo
                        //attachment.url - http url of image, for example "http://example.com/wp-content/uploads/2012/12/my-image.jpg"
                        //attachment.width
                    });

                    //Open modal
                    customFileFrame.open();
                    return false;
                });
            });
        </script>
        <?php
        return ob_get_clean();
    }
}
ExsempleDimetrodonMediaUploader::get_instance();
7
  • 1
    Answers should be more than a code snippet. Please file an edit and explain why this would work.
    – Gabriel
    Dec 3, 2015 at 14:18
  • 1
    What you have posted makes no sense, is this a question, comment or an answer. What does the code do, how does it work, etc etc.... Dec 3, 2015 at 14:27
  • Please expand upon this answer. As is, it is meaningless to anyone who doesn't already know what they are doing. In fact, it doesn't make sense to people who do know what they are doing (@PieterGoosen is no slouch, nor am I).
    – s_ha_dum
    Dec 3, 2015 at 14:50
  • Sorry for the delay in the explanations. I roll up in the vanity of vanities
    – Dimetrodon
    Jan 8, 2016 at 1:05
  • 1
    It works! Thanks man... I've been trying to extend this functionality in various ways but couldn't get across it. Just glad I found this. Dec 12, 2018 at 22:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.