miriamdepaula

WordPress: Plupload metabox

Jan 24th, 2012
1,227
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 4.55 KB | None | 0 0
  1. <?php
  2. //Plupload docs: http://www.plupload.com/plupload/docs/api/index.html
  3. //fonte: http://wordpress.stackexchange.com/questions/33173/plupload-intergration-in-a-meta-box
  4.  
  5. // include js
  6. add_action('admin_enqueue_scripts', function($page){
  7.  
  8.   // check if this your page here with the upload form!
  9.   if(($page !== 'post.php') || (get_post_type() !== 'post'))
  10.     return;
  11.  
  12.   wp_enqueue_script('plupload-all');
  13. });
  14.  
  15.  
  16.  
  17. // this adds a simple metabox with the upload form on the edit-post page
  18. add_action('add_meta_boxes', function(){
  19.   add_meta_box('gallery_photos', __('Photos'), 'upload_meta_box', 'post', 'normal', 'high');
  20.  
  21. });                                        
  22.  
  23. // so here's the actual uploader
  24. // most of the code comes from media.php and handlers.js
  25. function upload_meta_box(){ ?>
  26.    <div id="plupload-upload-ui" class="hide-if-no-js">
  27.      <div id="drag-drop-area">
  28.        <div class="drag-drop-inside">
  29.         <p class="drag-drop-info"><?php _e('Drop files here'); ?></p>
  30.         <p><?php _ex('or', 'Uploader: Drop files here - or - Select Files'); ?></p>
  31.         <p class="drag-drop-buttons"><input id="plupload-browse-button" type="button" value="<?php esc_attr_e('Select Files'); ?>" class="button" /></p>
  32.       </div>
  33.      </div>
  34.   </div>
  35.  
  36.   <?php
  37.  
  38.   $plupload_init = array(
  39.     'runtimes'            => 'html5,silverlight,flash,html4',
  40.     'browse_button'       => 'plupload-browse-button',
  41.     'container'           => 'plupload-upload-ui',
  42.     'drop_element'        => 'drag-drop-area',
  43.     'file_data_name'      => 'async-upload',            
  44.     'multiple_queues'     => true,
  45.     'max_file_size'       => wp_max_upload_size().'b',
  46.     'url'                 => admin_url('admin-ajax.php'),
  47.     'flash_swf_url'       => includes_url('js/plupload/plupload.flash.swf'),
  48.     'silverlight_xap_url' => includes_url('js/plupload/plupload.silverlight.xap'),
  49.     'filters'             => array(array('title' => __('Allowed Files'), 'extensions' => '*')),
  50.     'multipart'           => true,
  51.     'urlstream_upload'    => true,
  52.  
  53.     // additional post data to send to our ajax hook
  54.     'multipart_params'    => array(
  55.       '_ajax_nonce' => wp_create_nonce('photo-upload'),
  56.       'action'      => 'photo_gallery_upload',            // the ajax action name
  57.     ),
  58.   );
  59.  
  60.   // we should probably not apply this filter, plugins may expect wp's media uploader...
  61.   $plupload_init = apply_filters('plupload_init', $plupload_init); ?>
  62.  
  63.   <script type="text/javascript">
  64.  
  65.     jQuery(document).ready(function($){
  66.  
  67.       // create the uploader and pass the config from above
  68.       var uploader = new plupload.Uploader(<?php echo json_encode($plupload_init); ?>);
  69.  
  70.       // checks if browser supports drag and drop upload, makes some css adjustments if necessary
  71.       uploader.bind('Init', function(up){
  72.         var uploaddiv = $('#plupload-upload-ui');
  73.  
  74.         if(up.features.dragdrop){
  75.           uploaddiv.addClass('drag-drop');
  76.             $('#drag-drop-area')
  77.               .bind('dragover.wp-uploader', function(){ uploaddiv.addClass('drag-over'); })
  78.               .bind('dragleave.wp-uploader, drop.wp-uploader', function(){ uploaddiv.removeClass('drag-over'); });
  79.  
  80.         }else{
  81.           uploaddiv.removeClass('drag-drop');
  82.           $('#drag-drop-area').unbind('.wp-uploader');
  83.         }
  84.       });
  85.  
  86.       uploader.init();
  87.  
  88.       // a file was added in the queue
  89.       uploader.bind('FilesAdded', function(up, files){
  90.         var hundredmb = 100 * 1024 * 1024, max = parseInt(up.settings.max_file_size, 10);
  91.  
  92.         plupload.each(files, function(file){
  93.           if (max > hundredmb && file.size > hundredmb && up.runtime != 'html5'){
  94.             // file size error?
  95.  
  96.           }else{
  97.  
  98.             // a file was added, you may want to update your DOM here...
  99.             console.log(file);
  100.           }
  101.         });
  102.  
  103.         up.refresh();
  104.         up.start();
  105.       });
  106.  
  107.       // a file was uploaded
  108.       uploader.bind('FileUploaded', function(up, file, response) {
  109.  
  110.         // this is your ajax response, update the DOM with it or something...
  111.         console.log(response);
  112.  
  113.       });
  114.  
  115.     });  
  116.  
  117.   </script>
  118.   <?php
  119. }
  120.  
  121.  
  122. // handle uploaded file here
  123. add_action('wp_ajax_photo_gallery_upload', function(){
  124.  
  125.   check_ajax_referer('photo-upload');
  126.  
  127.   // you can use WP's wp_handle_upload() function:
  128.   $status = wp_handle_upload($_FILES['async-upload'], array('test_form'=>true, 'action' => 'photo_gallery_upload'));
  129.  
  130.   // and output the results or something...
  131.   echo 'Uploaded to: '.$status['url'];
  132.  
  133.   exit;
  134. });
  135.  
  136. ?>
Advertisement
Add Comment
Please, Sign In to add comment