Plupload Intergration trong một hộp meta?

Tôi biết rằng plupload sẽ là công cụ tải lên mới cho WordPress 3.3 nhưng tôi đã tự hỏi liệu có tài liệu nào về cách tích hợp với WordPress không.

Cụ thể của tôi làm thế nào để thu thập phản hồi từ đối tượng jQuery plUpload khi nó đã tải lên phương tiện mà bạn muốn và làm thế nào một người sẽ sử dụng cùng chức năng trong hộp meta để tạo thư viện?

Có ai chơi xung quanh nó chưa?

Cụ thể của tôi làm thế nào để thu thập phản hồi từ đối tượng jQuery plUpload khi nó đã tải lên phương tiện mà bạn muốn và làm thế nào một người sẽ sử dụng cùng chức năng trong hộp meta để tạo thư viện?

Có một tệp cụ thể xử lý chức năng này : /wp-includes/js/plupload/handlers.dev.js. Tệp này chứa tất cả các móc và trình kích hoạt liên kết Plupload (hệ thống đa tệp kéo / thả của bên thứ ba) với trình tải lên.

Có hai sự kiện bạn có thể muốn xem xét: "FileUploaded" và "Upload Complete"

Tập tin đã được tải lên

Hãy nhớ rằng, trình tải lên mới có khả năng tải lên nhiều tệp cùng một lúc. Vì vậy, nếu có điều gì đó bạn muốn làm sau khi mỗi tệp trong hàng đợi được tải lên, bạn sẽ sử dụng jQuery để liên kết với sự kiện này.

WordPress, ví dụ, liên kết như sau:

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

Các uploadSuccesschức năng ở đây xử lý hình ảnh thu nhỏ, lấy về meta tập tin đính kèm từ máy chủ, và liên kết chỉnh sửa / xóa các nút cho các đối tượng đúng.

UploadComplete

Sự kiện UploadComplete sẽ kích hoạt sau khi mọi thứ trong hàng đợi được tải lên xong. Nếu bạn muốn thực hiện thao tác dọn dẹp chung sau khi toàn bộ quá trình tải xuống kết thúc, đây là điều bạn sẽ muốn liên kết.

WordPress, ví dụ, liên kết như sau:

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

Các uploadCompletechức năng ở đây chỉ cho phép nút "Insert gallery" trên trang.

Không may ...

... dường như không có cách nào để chúng ta liên kết với những sự kiện này. Đối uploadertượng tồn tại trong một bao đóng trong handlers.jstệp và Plupload tự nó không có cách nào để tham chiếu các thể hiện hiện có. Bạn không thể sử dụng một bộ chọn jQuery đơn giản để đánh hơi nó và thêm một sự kiện tùy chỉnh ... vì vậy chúng tôi không gặp may ở đó.

Một mặt, bạn có thể sử dụng các sự kiện tùy chỉnh này theo ý muốn trong các hệ thống của riêng bạn. Chỉ cần quay phiên bản handlers.jstệp của riêng bạn với các sự kiện của riêng bạn và bạn có thể làm bất cứ điều gì bạn muốn. Nhưng đối với trình tải lên hiện tại, bạn bị mắc kẹt với API hiện có.

Hãy nhớ rằng Pluploader mới gọi các phương thức tương tự vào cùng thời điểm với trình tải lên Flash cũ đã làm. Vì vậy, dự đoán tốt nhất của tôi là bất kỳ hack hoặc tích hợp nào bạn có nên tiếp tục hoạt động.

Kiểm tra giả định đó

Tôi có một plugin sử dụng trình tải lên hiện có để tải lên tệp đính kèm và hiển thị URL trong trường meta tùy chỉnh. Nó hoạt động như ma thuật với trình tải lên cũ, vì vậy tôi đã kích hoạt nó trong WP 3.3 để xem nó có hoạt động với trình tải lên mới không .

Và nó làm được!

Vì vậy, nếu bạn đã tích hợp với trình tải lên phương tiện, hệ thống của bạn vẫn sẽ hoạt động với hệ thống mới mà không có bất kỳ thay đổi nào.

(đây chỉ là một ví dụ thực tế dựa trên câu trả lời của 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;
});

Có nhiều sự kiện tải lên bạn có thể sử dụng, hãy xem tài liệu của nó ....

Đây là bản mở rộng cho câu trả lời của @One Trick Pony. Điều này, ngoài việc tải tệp lên đúng, cũng sẽ lưu tệp đã nói dưới dạng tệp đính kèm:

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