javascript - Update media library attachments

I import image to wordpress via wp_insert_attachment.

On frontend wordpress media library still don't know that image is imported. I need a way to update attachments in media library without refreshing page.

I found partial solution:

wp.media.frame.on('open', function() {
    if (wp.media.frame.content.get() !== null) {          
        wp.media.frame.content.get().collection.props.set({ignore: (+ new Date())});
        wp.media.frame.content.get().options.selection.reset();
        } else {
            wp.media.frame.library.props.set({ignore: (+ new Date())});
        }
}, this);

Problem with this part of code is that now when I try to upload photo using Media Library uploader, image is uploaded correctly but it's not displayed.

I import image to wordpress via wp_insert_attachment.

On frontend wordpress media library still don't know that image is imported. I need a way to update attachments in media library without refreshing page.

I found partial solution:

wp.media.frame.on('open', function() {
    if (wp.media.frame.content.get() !== null) {          
        wp.media.frame.content.get().collection.props.set({ignore: (+ new Date())});
        wp.media.frame.content.get().options.selection.reset();
        } else {
            wp.media.frame.library.props.set({ignore: (+ new Date())});
        }
}, this);

Problem with this part of code is that now when I try to upload photo using Media Library uploader, image is uploaded correctly but it's not displayed.

• javascript
• media-library

Share Improve this question asked Jan 17, 2019 at 15:07 gardelingardelin 12511 silver badge77 bronze badges 1

• I recon that you should use WordPress' REST Api. Maybe this post can help? – Zeth Commented Jan 17, 2019 at 15:42

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

edit: ok after working on this for the last hour ive finally found a solution that works without affecting uploading and without messing with ignore or reset

wp.media.frame.on('open', function() {
    if (wp.media.frame.content.get() !== null) {          
        // this forces a refresh of the content
        wp.media.frame.content.get().collection._requery(true);

        // optional: reset selection
        wp.media.frame.content.get().options.selection.reset();
    }
}, this);

This depends on how you use wp_insert_attachment(). Here is a full example copied from the codex:

// $filename should be the path to a file in the upload directory.
$filename = '/path/to/uploads/2013/03/filename.jpg';

// The ID of the post this attachment is for.
$parent_post_id = 37;

// Check the type of file. We'll use this as the 'post_mime_type'.
$filetype = wp_check_filetype( basename( $filename ), null );

// Get the path to the upload directory.
$wp_upload_dir = wp_upload_dir();

// Prepare an array of post data for the attachment.
$attachment = array(
    'guid'           => $wp_upload_dir['url'] . '/' . basename( $filename ), 
    'post_mime_type' => $filetype['type'],
    'post_title'     => preg_replace( '/\.[^.]+$/', '', basename( $filename ) ),
    'post_content'   => '',
    'post_status'    => 'inherit'
);

// Insert the attachment.
$attach_id = wp_insert_attachment( $attachment, $filename, $parent_post_id );

// Make sure that this file is included, as wp_generate_attachment_metadata() depends on it.
require_once( ABSPATH . 'wp-admin/includes/image.php' );

// Generate the metadata for the attachment, and update the database record.
$attach_data = wp_generate_attachment_metadata( $attach_id, $filename );
wp_update_attachment_metadata( $attach_id, $attach_data );

//If you want to set it as a thumbnail
set_post_thumbnail( $parent_post_id, $attach_id );