web-dev-qa-db-fra.com

Intégration Plupload dans une méta-boîte?

Je sais que plupload sera le nouveau moteur de téléchargement pour WordPress 3.3, mais je me demandais s’il existait encore de la documentation sur la façon dont il s’intègre à WordPress.

Mon spécifiquement comment collecter une réponse de l'objet plUpload jQuery une fois qu'il a téléchargé le média souhaité et comment utiliser les mêmes fonctionnalités dans une méta-boîte pour créer une galerie?

Quelqu'un a-t-il déjà joué avec?

uploadsplupload
32
Manny Fleurmond

Mon spécifiquement comment collecter une réponse de l'objet jQuery plUpload une fois qu'il a téléchargé le média souhaité et comment utiliser les mêmes fonctionnalités dans une méta-boîte pour créer une galerie?

Un fichier spécifique gère cette fonctionnalité: /wp-includes/js/plupload/handlers.dev.js. Ce fichier contient tous les points d'ancrage et les déclencheurs qui relient Plupload (le système de fichiers multiples glisser-déposer tiers) au programme de téléchargement.

Il y a deux événements que vous voudrez peut-être consulter: "FileUploaded" et "Upload Complete"

Fichier téléchargé

Rappelez-vous que le nouveau téléchargeur est capable de télécharger plusieurs fichiers à la fois. Ainsi, si vous souhaitez effectuer une opération après le téléchargement de chaque fichier de la file d'attente, vous utiliserez jQuery pour établir une liaison avec cet événement.

WordPress, par exemple, lie les éléments suivants:

uploader.bind('FileUploaded', function(up, file, response) {
    uploadSuccess(file, response.response);
});'

La fonction uploadSuccess gère ici les vignettes d'image, récupère les méta de pièces jointes du serveur et lie les boutons de modification/suppression à l'objet de droite.

Téléchargement complet

L'événement UploadComplete se déclenchera après que tout dans la file d'attente est terminé. Si vous souhaitez déclencher une opération de nettoyage général une fois le téléchargement terminé, vous devez vous y reporter.

WordPress, par exemple, lie les éléments suivants:

uploader.bind('UploadComplete', function(up, files) {
    uploadComplete();
});

La fonction uploadComplete n'active ici que le bouton "Insérer une galerie" de la page.

Malheureusement ...

... il ne semble pas y avoir de moyen pour nous de nous lier à ces événements. L'objet uploader existe dans une fermeture du fichier handlers.js et Plupload lui-même ne permet pas de référencer des instances existantes. Vous ne pouvez pas utiliser un simple sélecteur jQuery pour le détecter et ajouter un événement personnalisé ... pour ne pas avoir de chance là-bas.

D'une part, vous pouvez utiliser ces événements personnalisés à volonté dans vos propres systèmes. Il suffit de créer votre propre version du fichier handlers.js avec vos propres événements et vous pouvez faire ce que vous voulez. Mais pour le programme de téléchargement existant, vous êtes coincé avec l'API existante.

N'oubliez pas que le nouveau Pluploader appelle les mêmes méthodes au même moment que l'ancien téléchargeur Flash. Donc, ma meilleure hypothèse est que toutes les intégrations ou intégrations existantes que vous avez devraient continuer à fonctionner.

Tester cette hypothèse

J'ai un plugin qui utilise le programme de téléchargement existant pour télécharger les pièces jointes et afficher l'URL dans un champ méta personnalisé. Cela fonctionnait comme par magie avec l'ancien téléchargeur. Je l'ai donc lancé dans WP 3.3 pour voir si cela fonctionnait également avec new .

Et ça le fait!

Donc, si vous intégrez déjà le programme de téléchargement de média, votre système doit toujours travailler avec le nouveau système sans aucune modification.

18
EAMann

(ceci est juste un exemple pratique basé sur la réponse d'EAMann)

// include js
add_action('admin_enqueue_scripts', function($page){

  // check if this your page here with the upload form!
  if(($page !== 'post.php') || (get_post_type() !== 'post'))
    return;

  wp_enqueue_script('plupload-all');
});



// this adds a simple metabox with the upload form on the edit-post page
add_action('add_meta_boxes', function(){
  add_meta_box('gallery_photos', __('Photos'), 'upload_meta_box', 'post', 'normal', 'high');

});                                               



// so here's the actual uploader
// most of the code comes from media.php and handlers.js
function upload_meta_box(){ ?>
   <div id="plupload-upload-ui" class="hide-if-no-js">
     <div id="drag-drop-area">
       <div class="drag-drop-inside">
        <p class="drag-drop-info"><?php _e('Drop files here'); ?></p>
        <p><?php _ex('or', 'Uploader: Drop files here - or - Select Files'); ?></p>
        <p class="drag-drop-buttons"><input id="plupload-browse-button" type="button" value="<?php esc_attr_e('Select Files'); ?>" class="button" /></p>
      </div>
     </div>
  </div>

  <?php

  $plupload_init = array(
    'runtimes'            => 'html5,silverlight,flash,html4',
    'browse_button'       => 'plupload-browse-button',
    'container'           => 'plupload-upload-ui',
    'drop_element'        => 'drag-drop-area',
    'file_data_name'      => 'async-upload',            
    'multiple_queues'     => true,
    'max_file_size'       => wp_max_upload_size().'b',
    'url'                 => admin_url('admin-ajax.php'),
    'flash_swf_url'       => includes_url('js/plupload/plupload.flash.swf'),
    'silverlight_xap_url' => includes_url('js/plupload/plupload.silverlight.xap'),
    'filters'             => array(array('title' => __('Allowed Files'), 'extensions' => '*')),
    'multipart'           => true,
    'urlstream_upload'    => true,

    // additional post data to send to our ajax hook
    'multipart_params'    => array(
      '_ajax_nonce' => wp_create_nonce('photo-upload'),
      'action'      => 'photo_gallery_upload',            // the ajax action name
    ),
  );

  // we should probably not apply this filter, plugins may expect wp's media uploader...
  $plupload_init = apply_filters('plupload_init', $plupload_init); ?>

  <script type="text/javascript">

    jQuery(document).ready(function($){

      // create the uploader and pass the config from above
      var uploader = new plupload.Uploader(<?php echo json_encode($plupload_init); ?>);

      // checks if browser supports drag and drop upload, makes some css adjustments if necessary
      uploader.bind('Init', function(up){
        var uploaddiv = $('#plupload-upload-ui');

        if(up.features.dragdrop){
          uploaddiv.addClass('drag-drop');
            $('#drag-drop-area')
              .bind('dragover.wp-uploader', function(){ uploaddiv.addClass('drag-over'); })
              .bind('dragleave.wp-uploader, drop.wp-uploader', function(){ uploaddiv.removeClass('drag-over'); });

        }else{
          uploaddiv.removeClass('drag-drop');
          $('#drag-drop-area').unbind('.wp-uploader');
        }
      });

      uploader.init();

      // a file was added in the queue
      uploader.bind('FilesAdded', function(up, files){
        var hundredmb = 100 * 1024 * 1024, max = parseInt(up.settings.max_file_size, 10);

        plupload.each(files, function(file){
          if (max > hundredmb && file.size > hundredmb && up.runtime != 'html5'){
            // file size error?

          }else{

            // a file was added, you may want to update your DOM here...
            console.log(file);
          }
        });

        up.refresh();
        up.start();
      });

      // a file was uploaded 
      uploader.bind('FileUploaded', function(up, file, response) {

        // this is your ajax response, update the DOM with it or something...
        console.log(response);

      });

    });   

  </script>
  <?php
}


// handle uploaded file here
add_action('wp_ajax_photo_gallery_upload', function(){

  check_ajax_referer('photo-upload');

  // you can use WP's wp_handle_upload() function:
  $status = wp_handle_upload($_FILES['async-upload'], array('test_form'=>true, 'action' => 'photo_gallery_upload'));

  // and output the results or something...
  echo 'Uploaded to: '.$status['url'];

  exit;
});

Il y a plus d'événements plupload que vous pouvez utiliser, consultez sa documentation ....

22
onetrickpony

Voici une extension de la réponse de @One Trick Pony. Ceci, en plus de télécharger le fichier sur le bon, sauvegardera également ledit fichier en pièce jointe:

<?php
// include js
add_action('admin_enqueue_scripts', function($page){

  // check if this your page here with the upload form!
  if(($page !== 'post.php') || (get_post_type() !== 'post'))
    return;

  wp_enqueue_script('plupload-all');
});



// this adds a simple metabox with the upload form on the edit-post page
add_action('add_meta_boxes', function(){
  add_meta_box('gallery_photos', __('Photos'), 'upload_meta_box', 'post', 'normal', 'high');

});                                               



// so here's the actual uploader
// most of the code comes from media.php and handlers.js
function upload_meta_box(){ ?>
   <div id="plupload-upload-ui" class="hide-if-no-js">
     <div id="drag-drop-area">
       <div class="drag-drop-inside">
        <p class="drag-drop-info"><?php _e('Drop files here'); ?></p>
        <p><?php _ex('or', 'Uploader: Drop files here - or - Select Files'); ?></p>
        <p class="drag-drop-buttons"><input id="plupload-browse-button" type="button" value="<?php esc_attr_e('Select Files'); ?>" class="button" /></p>
      </div>
     </div>
  </div>

  <?php

  $plupload_init = array(
    'runtimes'            => 'html5,silverlight,flash,html4',
    'browse_button'       => 'plupload-browse-button',
    'container'           => 'plupload-upload-ui',
    'drop_element'        => 'drag-drop-area',
    'file_data_name'      => 'async-upload',            
    'multiple_queues'     => true,
    'max_file_size'       => wp_max_upload_size().'b',
    'url'                 => admin_url('admin-ajax.php'),
    'flash_swf_url'       => includes_url('js/plupload/plupload.flash.swf'),
    'silverlight_xap_url' => includes_url('js/plupload/plupload.silverlight.xap'),
    'filters'             => array(array('title' => __('Allowed Files'), 'extensions' => '*')),
    'multipart'           => true,
    'urlstream_upload'    => true,

    // additional post data to send to our ajax hook
    'multipart_params'    => array(
      '_ajax_nonce' => wp_create_nonce('photo-upload'),
      'action'      => 'photo_gallery_upload',            // the ajax action name
    ),
  );

  // we should probably not apply this filter, plugins may expect wp's media uploader...
  $plupload_init = apply_filters('plupload_init', $plupload_init); ?>

  <script type="text/javascript">

    jQuery(document).ready(function($){

      // create the uploader and pass the config from above
      var uploader = new plupload.Uploader(<?php echo json_encode($plupload_init); ?>);

      // checks if browser supports drag and drop upload, makes some css adjustments if necessary
      uploader.bind('Init', function(up){
        var uploaddiv = $('#plupload-upload-ui');

        if(up.features.dragdrop){
          uploaddiv.addClass('drag-drop');
            $('#drag-drop-area')
              .bind('dragover.wp-uploader', function(){ uploaddiv.addClass('drag-over'); })
              .bind('dragleave.wp-uploader, drop.wp-uploader', function(){ uploaddiv.removeClass('drag-over'); });

        }else{
          uploaddiv.removeClass('drag-drop');
          $('#drag-drop-area').unbind('.wp-uploader');
        }
      });

      uploader.init();

      // a file was added in the queue
      uploader.bind('FilesAdded', function(up, files){
        var hundredmb = 100 * 1024 * 1024, max = parseInt(up.settings.max_file_size, 10);

        plupload.each(files, function(file){
          if (max > hundredmb && file.size > hundredmb && up.runtime != 'html5'){
            // file size error?

          }else{

            // a file was added, you may want to update your DOM here...
            console.log(file);
          }
        });

        up.refresh();
        up.start();
      });

      // a file was uploaded 
      uploader.bind('FileUploaded', function(up, file, response) {

        // this is your ajax response, update the DOM with it or something...
        console.log(response);

      });

    });   

  </script>
  <?php
}


// handle uploaded file here
add_action('wp_ajax_photo_gallery_upload', function(){

  check_ajax_referer('photo-upload');

  // you can use WP's wp_handle_upload() function:
  $file = $_FILES['async-upload'];
  $status = wp_handle_upload($file, array('test_form'=>true, 'action' => 'photo_gallery_upload'));

  // and output the results or something...
  echo 'Uploaded to: '.$status['url'];

  //Adds file as attachment to WordPress
  echo "\n Attachment ID: " .wp_insert_attachment( array(
     'post_mime_type' => $status['type'],
     'post_title' => preg_replace('/\.[^.]+$/', '', basename($file['name'])),
     'post_content' => '',
     'post_status' => 'inherit'
  ), $status['file']);

  exit;
});
?>
12
Manny Fleurmond