CODEWITHSUNDEEP
javascriptjquerywordpressmediamultifile-uploader
Noufal Binu
Noufal Binu

Reputation: 174

How I can use WordPress Media Uploader with Multiple image upload Button

I'm a beginner in jQuery, Multiple image upload Button implement with WordPress Media Uploader is not working, I need to know how to do the right way.

Here's my code: Javascript/jQuery For displaying the media uploader and handling the selected images:

jQuery(document).ready( function($){

var mediaUploader;

$('#upload-button').on('click',function(e) {
    e.preventDefault();
    if( mediaUploader ){
        mediaUploader.open();
        return;
    }

  mediaUploader = wp.media.frames.file_frame =wp.media({
    title: 'Choose a Hotel Picture',
    button: {
        text: 'Choose Picture'
    },
    multiple:false
  });

  mediaUploader.on('select', function(){
    attachment = mediaUploader.state().get('selection').first().toJSON();
    $('#profile-picture').val(attachment.url);
    $('#profile-picture-preview').css('background-image','url(' + attachment.url + ')');
  });
  mediaUploader.open();
}); });




<input type="button" id="upload-button1" class="button button-secondary" value="Upload Profiel Picture">
<input type="hidden" name="profile_picture1" id="profile-picture1" value="'.$picture.'">

<input type="button" id="upload-button2" class="button button-secondary" value="Upload Profiel Picture">
<input type="hidden" name="profile_picture2" id="profile-picture2" value="'.$picture.'">

Any help, as always, is greatly appreciated.

Upvotes: 3

Views: 1964

Answers (3)

Hanif
Hanif

Reputation: 7

Add button to upload multiple images

<input type='button' class="button-primary set_custom_images" value="Choose file" onclick="open_media_for_multiple_images();" />

and use below this js method

    function open_media_for_multiple_images()
    {
        media_uploader = wp.media({
            frame:    "post",
            state:    "insert",
            multiple: true
        });
    
        media_uploader.on("insert", function(){
    
            var length = media_uploader.state().get("selection").length;
            var images = media_uploader.state().get("selection").models
    
            for(var iii = 0; iii < length; iii++)
            {
                var image_url = images[iii].changed.url;
                var image_caption = images[iii].changed.caption;
                var image_title = images[iii].changed.title;
                
                console.log(image_title+"-----"+image_caption+"====="+image_url);
            }
        });
    
        media_uploader.open();
    }

Also add this method in your active theme

function enqueue_media_uploader()
    {
        wp_enqueue_media();
    }

add_action("admin_enqueue_scripts", "enqueue_media_uploader");

Upvotes: 0

Dima K
Dima K

Reputation: 11

I updated the jquery code a little bit, so this is working for me.

jQuery(document).ready( function($) {

            // Uploading files
            var mediaUploader;

            $('.upload_button').on('click', function( event ){

                event.preventDefault();

                var buttonID = $(this).data('id');

                // If the media frame already exists, reopen it.
                if ( mediaUploader ) {
                    // Open frame
                    mediaUploader.id = buttonID;
                    mediaUploader.open();
                    return;
                }

                // Create the media frame.
                mediaUploader = wp.media.frames.file_frame = wp.media({
                    id: buttonID,
                    title: 'Select a file to upload',
                    button: {
                        text: 'Select',
                    },
                    multiple: false // Set to true to allow multiple files to be selected
                });

                // When an image is selected, run a callback.
                mediaUploader.on( 'select', function() {
                    // We set multiple to false so only get one image from the uploader
                    attachment = mediaUploader.state().get('selection').first().toJSON();

                    // Do something with attachment.id and/or attachment.url here
                    $( '#file-preview_' + mediaUploader.id ).attr( 'src', attachment.url ).css( 'width', 'auto' );
                    $( '#file_attachment_' + mediaUploader.id ).val( attachment.id );
                });

                // Finally, open the modal
                mediaUploader.open();
            });

        });

image

Upvotes: 1

Alecadddd
Alecadddd

Reputation: 36

You need to simply change from ID to Classes for your selectors in order to make the media uploader usable on different buttons.

Then, you'll need to create an identifier in order to use the proper input filed to set the image. In my case, I used a data-attribute.

jQuery(document).ready( function($){

var mediaUploader;

$('.upload-button').on('click',function(e) {
    e.preventDefault();
    var buttonID = $(this).data('group');

    if( mediaUploader ){
        mediaUploader.open();
        return;
    }

  mediaUploader = wp.media.frames.file_frame =wp.media({
    title: 'Choose a Hotel Picture',
    button: {
        text: 'Choose Picture'
    },
    multiple:false
  });

  mediaUploader.on('select', function(){
    attachment = mediaUploader.state().get('selection').first().toJSON();
    $('#profile-picture'+buttonID).val(attachment.url);
    $('#profile-picture-preview'+buttonID).css('background-image','url(' + attachment.url + ')');
  });
  mediaUploader.open();
}); });




<input type="button" class="button button-secondary upload-button" value="Upload Profile Picture" data-group="1">
<input type="hidden" name="profile_picture1" id="profile-picture1" value="'.$picture1.'">

<input type="button" class="button button-secondary upload-button" value="Upload Profile Picture" data-group="2">
<input type="hidden" name="profile_picture2" id="profile-picture2" value="'.$picture2.'">

Upvotes: 2

Related Questions