how to use wordpress upload file/image code in my plugin

3 comments

1. If you only want to upload a file, you don’t need the media uploader. A simple form is all you need.

   To call the media uploader you need a link like this:

   <a onclick="return false;" title="Upload image" class="thickbox" id="add_image" href="media-upload.php?type=image&amp;TB_iframe=true&amp;width=640&amp;height=105">Upload Image</a>
   

   You’ll maybe have to append your URL to media-upload.php to make it working.

   Log in to Reply

2. YOu can use wordpress default media file uploader by using this code and simply retrieve link of image in jquery

   <label for="upload_image">
       <input id="upload_image" type="text" size="36" name="ad_image" value="http://" /> 
       <input id="upload_image_button" class="button" type="button" value="Upload Image" />
       <br />Enter a URL or upload an image
   </label>
   
   <?php
   add_action('admin_enqueue_scripts', 'my_admin_scripts');
   
   function my_admin_scripts() {
       if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {
           wp_enqueue_media();
           wp_register_script('my-admin-js', WP_PLUGIN_URL.'/my-plugin/my-admin.js', array('jquery'));
           wp_enqueue_script('my-admin-js');
       }
   }
   
   ?>
   
   <script>
       jQuery(document).ready(function($){
   
   
       var custom_uploader;
   
   
       $('#upload_image_button').click(function(e) {
   
           e.preventDefault();
   
           //If the uploader object has already been created, reopen the dialog
           if (custom_uploader) {
               custom_uploader.open();
               return;
           }
   
           //Extend the wp.media object
           custom_uploader = wp.media.frames.file_frame = wp.media({
               title: 'Choose Image',
               button: {
                   text: 'Choose Image'
               },
               multiple: true
           });
   
           //When a file is selected, grab the URL and set it as the text field's value
           custom_uploader.on('select', function() {
               console.log(custom_uploader.state().get('selection').toJSON());
               attachment = custom_uploader.state().get('selection').first().toJSON();
               $('#upload_image').val(attachment.url);
           });
   
           //Open the uploader dialog
           custom_uploader.open();
   
       });
   
   
   });
       </script>
   

   Log in to Reply

3. Hi you can use the following 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>
   

   Log in to Reply