WordPress wp.media Upload image

Ok here is my code – stock standard and works if I simply select an existing image

 jQuery(function($){
 var file_frame;

 $('#upload-button').on( 'click', function( e ){
    e.preventDefault();
      // If the media frame already exists, reopen it.
if ( file_frame ) {
  file_frame.open();
  return;
}
 // Create a new media frame
file_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
});

 file_frame.on('open', function(){
     console.log("inside open");

 });
    file_frame.on('update', function(){
     console.log("inside update");
 });
file_frame.on('select', function(){

        // This will return the selected image from the Media Uploader, the result is an object
        var uploaded_image = file_frame.state().get('selection').first();
        // We convert uploaded_image to a JSON object to make accessing it easier
        // Output to the console uploaded_image
        console.log(uploaded_image);
        var image_url = uploaded_image.toJSON().url;
        // Let's assign the url value to the input field
        $('#image-url').val(image_url);
    });
    file_frame.open();
});
});

But if I goto drag and drop an image in there the image is uploaded but an error is returned
“An error occurred in the upload. Please try again later.”

Read More

What have I missed, I’m assuming its some kind of refresh for the existing media selection window and my googling has not turned up anything.

Cheers

EDIT

I have tried several things to get the uploaded image to be shown in the media frame once uploaded. Not having much success.
As I said it appears the image is uploaded and added to the media library but I am missing a refresh or reload of the frame to show the image.

Any one have experience with or know another place to go look?

Related posts

1 comment

  1. Maybe this call when everything is ‘done’:

    if(wp.media.frame.library) wp.media.frame.library.props.set({ignore: (+ new Date())});
    

    Or if you need to separate the library Grid modal from media upload (edit post) modal:

    if(wp.media.frame.library){
        wp.media.frame.library.props.set({ignore: (+ new Date())});
      } else if(wp.media.frame.content.get().collection){
        wp.media.frame.content.get().collection.props.set({ignore: (+ new Date())});
        wp.media.frame.content.get().options.selection.reset();
    }
    

Comments are closed.