plugin development - Wordpress Media Uploader not displaying image that has just been uploaded

admin管理员组

文章数量:1122832

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.

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.

• plugin-development
• jquery
• uploads
• media-library

Share Improve this question asked Aug 8, 2023 at 16:24 JadeTechJadeTech 1144 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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.

本文标签： plugin developmentWordpress Media Uploader not displaying image that has just been uploaded