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. – Mark Kaplun Mar 24 '18 at 6:30

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? – Interactive Sep 23 '15 at 12:26
  • Yes I here is how:- – dev Sep 23 '15 at 12:37
  • define('UPLOADS', 'wp-content/myimages'); Make sure you add this code before the line: require_once(ABSPATH.’wp-settings.php’); – dev Sep 23 '15 at 12:37
  • Yes but this does the upload for all files and I only want it for the plugin – Interactive Sep 23 '15 at 12:44
  • it will be like this:- – dev Sep 23 '15 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, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.