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

31

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 manière dont il s’intègre à WordPress.

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

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

    
posée Manny Fleurmond 08.11.2011 - 15:04
la source

3 réponses

17
  

En particulier, comment collecter une réponse à partir 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?

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"

FileUploaded

N'oubliez pas que le nouveau programme de téléchargement est capable de télécharger plusieurs fichiers à la fois. Par conséquent, 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.

UploadComplete

L'événement UploadComplete se déclenche une fois que tout de 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 souhaitez y accéder.

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 de nous lier à ces événements. L'objet uploader existe dans une fermeture du fichier handlers.js et Plupload lui-même ne dispose pas d'un moyen 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.

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 vos hacks ou intégrations existants 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 méta-champ personnalisé. Cela fonctionnait comme par magie avec l'ancien téléchargeur. Je l'ai donc lancé dans le WP 3.3 pour voir s'il fonctionnait également avec le nouveau uploader.

Et c'est le cas!

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

    
réponse donnée EAMann 26.11.2011 - 01:24
la source
21

(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;
});

Vous pouvez utiliser davantage d’événements plupload, consultez sa documentation ....

    
réponse donnée onetrickpony 27.11.2011 - 03:03
la source
12

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 ce fichier en tant que 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;
});
?>
    
réponse donnée Manny Fleurmond 09.12.2011 - 14:21
la source

Lire d'autres questions sur les étiquettes