I want to add a media uploader to a plugin.

I have found and read This

It does shows the media uploader and it let's me select an image but as it uploads it gives me some crappy error: Error occurred during upload. Try again later.
This might be slight off because I translated it.

I don't know how to search for the real error here.
Can anyone tell me how to find it?

    <label for="image_url">Image</label>
    <input type="text" name="image_url" id="image_url" class="regular-text">
    <input type="button" name="upload-btn" id="upload-btn" class="button-secondary" value="Upload Image">

<script type="text/javascript">
      $('#upload-btn').click(function(e) {
             var image = wp.media({ 
             title: 'Upload Image',
             multiple: false
      .on('select', function(e){
     var uploaded_image = image.state().get('selection').first();
     var image_url = uploaded_image.toJSON().url;

If it is possible I would like to add an items to the Media Uploader:
Choose a folder to upload the file to.
Not by the person who is uploading but just a folder I create before the upload


Weird thing happend
I have disabled the WP_DEBUG function and now everything is working. If I set it to true there are no errors...

  • Please make your edit into an answer and accept it. Commented Mar 24, 2018 at 6:30

2 Answers 2


Try using this code:

define("ME_URL", rtrim(WP_PLUGIN_URL,'/') . '/' . basename(dirname(__FILE__)));
define("ME_DIR", rtrim(dirname(__FILE__), '/'));
function my_admin_scripts() {
function my_admin_styles() {
add_action('admin_print_scripts', 'my_admin_scripts');
add_action('admin_print_styles', 'my_admin_styles');
    <img src="<?php echo esc_attr( get_the_author_meta( 'profileimage', $user->ID ) ); ?>" id="ppimage">
    <input type="text" name="profileimage" id="profileimagetxt" value="<?php echo esc_attr( get_the_author_meta( 'profileimage', $user->ID ) ); ?>" class="regular-text" /><br />
    <input type="button" id="profileimage" value="Upload Image">
    <span class="description"><?php _e("profileimage"); ?></span>
<script type="text/javascript">
    $ = jQuery.noConflict();
      $('#profileimage').live('click',function() {
        formfield = $('#upload_image').attr('name');
        tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
        return false;
      window.send_to_editor = function(html) {
        imgurl = $('img',html).attr('src');

Hope it works for you :)

  • Thnx but as in my updated version described I got it fixed. However is there a way to change the upload folder? Commented Sep 23, 2015 at 12:26
  • Yes I here is how:-
    – dev
    Commented Sep 23, 2015 at 12:37
  • define('UPLOADS', 'wp-content/myimages'); Make sure you add this code before the line: require_once(ABSPATH.’wp-settings.php’);
    – dev
    Commented Sep 23, 2015 at 12:37
  • Yes but this does the upload for all files and I only want it for the plugin Commented Sep 23, 2015 at 12:44
  • it will be like this:-
    – dev
    Commented Sep 23, 2015 at 12:52

You can try this code for and here is ref. path with plugin also. http://blog.adlivetech.com/use-wordpress-media-upload-custom-code/

if ( isset( $_POST['submit_image_selector'] ) && isset( $_POST['image_attachment_id'] ) ) :
        update_option( 'media_selector_attachment_id', absint( $_POST['image_attachment_id'] ) );
    ?><form method='post'>
        <div class='image-preview-wrapper'>
            <img id='image-preview' src='<?php echo wp_get_attachment_url( get_option( 'media_selector_attachment_id' ) ); ?>' width='200'>
        <input id="upload_image_button" type="button" class="button" value="<?php _e( 'Upload image' ); ?>" />
        <input type='hidden' name='image_attachment_id' id='image_attachment_id' value='<?php echo get_option( 'media_selector_attachment_id' ); ?>'>
        <input type="submit" name="submit_image_selector" value="Save" class="button-primary">
$my_saved_attachment_post_id = get_option( 'media_selector_attachment_id', 0 );
    ?><script type='text/javascript'>
        jQuery( document ).ready( function( $ ) {
            // Uploading files
            var file_frame;
            var wp_media_post_id = wp.media.model.settings.post.id; // Store the old id
            var set_to_post_id = <?php echo $my_saved_attachment_post_id; ?>; // Set this
            jQuery('#upload_image_button').on('click', function( event ){
                // If the media frame already exists, reopen it.
                if ( file_frame ) {
                    // Set the post ID to what we want
                    file_frame.uploader.uploader.param( 'post_id', set_to_post_id );
                    // Open frame
                } else {
                    // Set the wp.media post id so the uploader grabs the ID we want when initialised
                    wp.media.model.settings.post.id = set_to_post_id;
                // Create the media frame.
                file_frame = wp.media.frames.file_frame = wp.media({
                    title: 'Select a image to upload',
                    button: {
                        text: 'Use this image',
                    multiple: false // Set to true to allow multiple files to be selected
                // When an image is selected, run a callback.
                file_frame.on( 'select', function() {
                    // We set multiple to false so only get one image from the uploader
                    attachment = file_frame.state().get('selection').first().toJSON();
                    // Do something with attachment.id and/or attachment.url here
                    $( '#image-preview' ).attr( 'src', attachment.url ).css( 'width', 'auto' );
                    $( '#image_attachment_id' ).val( attachment.id );
                    // Restore the main post ID
                    wp.media.model.settings.post.id = wp_media_post_id;
                    // Finally, open the modal
            // Restore the main ID when the add media button is pressed
            jQuery( 'a.add_media' ).on( 'click', function() {
                wp.media.model.settings.post.id = wp_media_post_id;

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.