Use Media Uploader in Plugin

Question

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?

<?php
wp_enqueue_script('jquery');
wp_enqueue_media();
?>
<div>
    <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">

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

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

M.

---------------------------------------
UPDATE:
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...

Answer 1

Try using this code:

define("ME_URL", rtrim(WP_PLUGIN_URL,'/') . '/' . basename(dirname(__FILE__)));
define("ME_DIR", rtrim(dirname(__FILE__), '/'));
    
function my_admin_scripts() {
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
}
    
function my_admin_styles() {
    wp_enqueue_style('thickbox');
}
    
add_action('admin_print_scripts', 'my_admin_scripts');
add_action('admin_print_styles', 'my_admin_styles');

<td>
    <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>
</td>
</tr>
<script type="text/javascript">
    $ = jQuery.noConflict();
    $(document).ready(function($){
      $('#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');
        $('#profileimagetxt').val(imgurl);
        $('#ppimage').attr('src',imgurl);
        tb_remove();
      }
    });
</script>

Hope it works for you :)

Answer 2

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

<?php
if ( isset( $_POST['submit_image_selector'] ) && isset( $_POST['image_attachment_id'] ) ) :
        update_option( 'media_selector_attachment_id', absint( $_POST['image_attachment_id'] ) );
    endif;
    wp_enqueue_media();
    ?><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'>
        </div>
        <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">
    </form>
<?php
$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 ){
                event.preventDefault();
                // 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
                    file_frame.open();
                    return;
                } 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
                    file_frame.open();
            });
            // 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;
            });
        });
    </script>