0

I am trying to implement a custom WP Media uploader within a plugin. I want multiple images to be uploaded also.

I have the following javascript to open the media uploader. The modal opens fine and I am able to select existsing media. I am also able to upload new media sucessfully, but when uploading the new media, it will not display within the media uploader. There is a thumbnail of the new image on the right hand side of the uploader but not thumbnail to select within the actual uploader.

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

    var image_uploader;
    
    $('#image-button').click(function(e){

        e.preventDefault();

        //If the uploader object has already been created, reopen the dialog
        if (image_uploader) {
            image_uploader.open();
            return;
        }

        //Extend the wp.media object
        image_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: true,
            library: {
                type: [ 'image' ],
                //filterable: 'all',
                editable: false,
            },
        }); 

        //When files are selected, extract information into JSON object
        image_uploader.on('select', function() {

            var attachments = image_uploader.state().get('selection').map( 

                function( attachment ) {

                    attachment.toJSON();
                    return attachment;

                }
            );
            
            var i;
            
            // Remove the existing images
            $('.item-image').remove();
            $('input[name="image_id_array[]"]').remove();

            // Add the images to the display area
            for (i = 0; i < attachments.length; ++i) {

                $('#image-section').before(
                    '<img src="' + attachments[i].attributes.url + '" class="item-image" id="' + attachments[i].id + '">'
                );
    
            }
            // Add the inputs for each image to the display area
            for (i = 0; i < attachments.length; ++i) {

                $('#image-section').before( 
                    '<input type="hidden" name="image_id_array[]" id="image' + attachments[i].id + '"  value="' + attachments[i].id + '">' 
                );

            }

        });

        //Open the uploader dialog
        image_uploader.open();
        $('#remove-button').removeClass("hidden");

    })

})

I have tried refactoring this code, but cannot work out why it is not allowing image display for newly uploaded images. I have tried on a cople of different machines and development sites, but the bug is the same on all of them.

Any help from you awesome guys would be much appreciated.

1 Answer 1

0

Your issue sounds like a visual bug in the WordPress Media Uploader's interface after an image has been uploaded, especially since you mentioned that the image appears in the right-hand preview pane but not as a selectable thumbnail.

Try to force refresh the media frame after upload. You can use the add:attachment event to force the media frame to refresh when a new attachment is added. Add this right after you define your image_uploader object:

wp.media.model.Attachments.all.on('add', function(){
   image_uploader.uploader.uploader.refresh(); 
});

I haven't tested this code, so just adjust it so it fits your code.

2
  • I’m not entirely sure where the part of the definition Attachments comes from.
    – JadeTech
    Aug 12, 2023 at 17:01
  • As I said, add the line of code after you define/initialize your image_uploader object. Aug 13, 2023 at 12:46

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.