UPDATE: I have corrected the below code, to reflect the answer which resolved my issue.

I have created a Custom Admin Page and have managed to get all of my Fields and Save buttons to work.

Within said Custom Admin Page, I have an 'Upload Profile Image' button. The button works fine, in the respect of triggering the 'Upload Media' window, with one issue, the first click on the button does not work. Once I have done the first 'faulty click', all subsequent clicks work until I reload the page where the first click does nothing again.

It is my first time working with JavaScript properly, so I am not entirely sure where the error could lie. Here is the JavaScript code I am using:

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

    var mediaUploader;

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

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

        mediaUploader.on('select', function(){
            attachment = mediaUploader.state().get('selection').first().toJSON();
            $('#profile-picture').val(attachment.url); //Was missing this line.
        });

        mediaUploader.open(); //As soon as I entered this line here, it resolved my 'double click' issue.

    });

});

Is anyone able to see if it is something in my coding that is causing this issue?

UPDATE: I have corrected the below code, to reflect the answer which resolved my issue.

I have created a Custom Admin Page and have managed to get all of my Fields and Save buttons to work.

Within said Custom Admin Page, I have an 'Upload Profile Image' button. The button works fine, in the respect of triggering the 'Upload Media' window, with one issue, the first click on the button does not work. Once I have done the first 'faulty click', all subsequent clicks work until I reload the page where the first click does nothing again.

It is my first time working with JavaScript properly, so I am not entirely sure where the error could lie. Here is the JavaScript code I am using:

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

    var mediaUploader;

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

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

        mediaUploader.on('select', function(){
            attachment = mediaUploader.state().get('selection').first().toJSON();
            $('#profile-picture').val(attachment.url); //Was missing this line.
        });

        mediaUploader.open(); //As soon as I entered this line here, it resolved my 'double click' issue.

    });

});

Is anyone able to see if it is something in my coding that is causing this issue?

• php
• javascript
• scripts

2 Answers 2

I have just sussed out the answer. I was missing the mediaUploader.open(); entry. I have amended my original code, accordingly, just in case anyone is having the same issue.

function insertuploder(upid){
     this.disabled = true;
    var ures = upid.split("_");
    var uplt = ures[3];

var mediaUploader;

  jQuery('#'+upid).on('click',function(e) {
    e.preventDefault();
      if (mediaUploader) {
      mediaUploader.open();
      return;
    }
      console.log(mediaUploader);
    mediaUploader = wp.media.frames.file_frame = wp.media({
      //title: 'Choose Image',
      button: {
      text: 'Choose Image'
    }, multiple: false });
    mediaUploader.on('select', function() {
      var attachment = mediaUploader.state().get('selection').first().toJSON();
        console.log(attachment);
      jQuery('#background_image_'+uplt).val(attachment.url);
    });
    mediaUploader.open();
  });

}