How can I use Multi Media Uploader in the WordPress Plugins?

Question

I try to add the multi uploading options in the wordpress plugins I repeated this code in the plugin(two times) only changing the id name.

Answer 1

Here is my code based on Codex wp.media Example

Javascript

var sfieldGroup= '.field-group';   // top level parent  

var wpMediaUploader = { 
            sBtnAdd : ".upload-custom-wp-media",
            sBtnRemove : ".remove-custom-wp-media",
            sMediaData: ".media-data",
            sInput : ".custom-wp-media"
        };

 function wpMedia() {
        $(wpMediaUploader.sBtnAdd).on("click", function (event) {
            event.preventDefault();

            var self = $(this);
            var fieldGroup = self.parents(sfieldGroup);

            // Create a new media frame
            var frame = wp.media({
                title: "Select or Upload Media Of Your Chosen Persuasion",
                button: {
                    text: "Use this media"
                },
                multiple: false  // Set to true to allow multiple files to be selected
            });

            frame.on("select", function () {
                var attachment = frame.state().get("selection").first().toJSON();

                switch(attachment.mime){
                    case "image/jpeg" :
                    case "image/png" :
                    case "image/bmp" :
                    case "image/gif" :
                        fieldGroup.find(wpMediaUploader.sMediaData)
                            .append("");
                        break;
                }

                $("
",{
                    text: attachment.filename
                }).appendTo(fieldGroup.find(wpMediaUploader.sMediaData));

                fieldGroup.find(wpMediaUploader.sInput).val(attachment.id);
                fieldGroup.find(wpMediaUploader.sBtnAdd).addClass("hidden");
                fieldGroup.find(wpMediaUploader.sBtnRemove).removeClass("hidden");

                frame.close();
            });

            frame.open();
        });


        $(wpMediaUploader.sBtnRemove).on("click", function (event) {
            event.preventDefault();

            var self = $(this);
            var fieldGroup = self.parents(sfieldGroup); 


            // Clear out the preview image
            fieldGroup.find(wpMediaUploader.sMediaData).html("");

            // Un-hide the add image link
            fieldGroup.find(wpMediaUploader.sBtnAdd).removeClass("hidden");

            // Hide the delete image link
            fieldGroup.find(wpMediaUploader.sBtnRemove).addClass("hidden");

            // Delete the image id from the hidden input
            fieldGroup.find(wpMediaUploader.sInput).val("");
        });
    }

HTML

    

    

        Upload Media
        Remove Selected Media
    
    
  

Tip
if you console.log frame,you will be exposed to API :)

            var frame = wp.media({
                title: "Select or Upload Media Of Your Chosen Persuasion",
                button: {
                    text: "Use this media"
                },
                multiple: false  // Set to true to allow multiple files to be selected
            });