메타 박스에 Plupload Intergration?


32

plupload가 WordPress 3.3의 새로운 업로드 엔진이 될 것임을 알고 있지만 WordPress와 통합하는 방법에 대한 문서가 아직 있는지 궁금합니다.

필자 가 원하는 미디어를 업로드 한 후 plUpload jQuery 객체 에서 응답을 수집하는 방법과 메타 상자에서 동일한 기능을 사용하여 갤러리를 만드는 방법은 무엇입니까?

아직 가지고 놀아 본 사람이 있습니까?


현상금에 감사드립니다, 그러나 WordPress 3.3이 공식 릴리스 될 때까지 답변이 오지 않을 가능성이 높습니다
Manny Fleurmond

3
좋은의 내가 :-) 그것을 이번 주말을 살펴 보겠습니다 지금 개월 동안 3.3을 사용하고 기회, 첫 번째 RC이 저하 전에이 정확한 일을 쓸 필요가 ...도있다
EAMann

다음은 새 업 로더가 사용하는 jQuery 플러그인 인 plupload ( plupload.com )에 대한 링크 입니다. 나는 그들이 그것을 어떻게 구현하는지에 대한 요점을 가지고 있지만 파일이 성공적으로 업로드 될 때 새로운 구현이 어떻게 응답을 받는지 알 수 없다.
매니 Fleurmond

답변:


18

필자가 원하는 미디어를 업로드 한 후 plUpload jQuery 객체에서 응답을 수집하는 방법과 메타 상자에서 동일한 기능을 사용하여 갤러리를 만드는 방법은 무엇입니까?

이 기능을 처리하는 특정 파일이 있습니다 : /wp-includes/js/plupload/handlers.dev.js. 이 파일에는 Plupload (타사 끌어서 놓기 다중 파일 시스템)를 업 로더에 연결하는 모든 후크 및 트리거가 포함되어 있습니다.

보고 싶은 두 가지 이벤트가 있습니다 : "FileUploaded"및 "Upload Complete"

파일 업로드

새 업 로더는 한 번에 여러 파일을 업로드 할 수 있습니다. 따라서 대기열의 각 파일이 업로드 된 후 수행하려는 작업이있는 경우 jQuery를 사용하여이 이벤트에 바인딩합니다.

예를 들어 WordPress는 다음을 바인딩합니다.

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

uploadSuccess기능은 이미지 축소판을 처리하고 서버에서 첨부 파일 메타를 가져오고 편집 / 삭제 버튼을 올바른 개체에 바인딩합니다.

업로드 완료

대기열의 모든 항목 이 업로드를 완료하면 UploadComplete 이벤트가 시작됩니다 . 전체 다운로드가 완료된 후 일반 정리 작업을 실행하려는 경우 바인딩하려는 것입니다.

예를 들어 WordPress는 다음을 바인딩합니다.

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

uploadComplete기능은 페이지에서 "갤러리 삽입"버튼을 활성화합니다.

불행히도 ...

... 우리가이 사건들에 묶을 방법이없는 것 같습니다. uploader객체는에 폐쇄 내에 존재하는 handlers.js파일 및 Plupload 자체는 기존의 인스턴스를 참조 할 수있는 방법이 없습니다. 간단한 jQuery 선택기를 사용하여 스니핑하고 커스텀 이벤트를 추가 할 수는 없으므로 운이 좋지 않습니다.

한편으로, 당신은 자신의 시스템에서 이러한 사용자 정의 이벤트를 자유롭게 사용할 수 있습니다. handlers.js자신만의 이벤트로 자신 의 파일 버전을 돌리면 원하는대로 할 수 있습니다. 그러나 기존 업 로더의 경우 기존 API가 붙어 있습니다.

새 Pluploader는 이전 Flash 업 로더와 동일한 시간에 동일한 메서드를 호출합니다. 따라서 최선의 추측은 기존 해킹이나 통합이 계속 작동해야한다는 것입니다.

그 가정을 테스트

기존 업 로더를 사용하여 파일 첨부를 업로드하고 URL을 맞춤 메타 필드에 표시 하는 플러그인 이 있습니다. 이전 업 로더에서 마술처럼 작동했기 때문에 WP 3.3에서 업 로더에서도 작동하는지 확인했습니다 .

그리고 그렇습니다!

따라서 이미 미디어 업 로더와 통합하는 경우 시스템은 변경없이 새 시스템과 계속 작동 해야합니다 .


22

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

사용할 수있는 더 많은 plupload 이벤트가 있습니다 . 문서를 확인하십시오 ....


나는이 코드를 그대로 시도했지만 지금까지 아무것도하지 않습니다. 이미지가 업로드 된 것 같지만 콘솔에서 응답이없는 곳을 모르겠습니다.
Manny Fleurmond

1
문제를 발견했습니다 : 어떤 이유로 wp_handle_upload로 보낸 $ _FILES [ 'async-upload']가 (가) 위에서 언급 한 함수에서 확인을 통과하지 못한 것 같습니다. wp_handle_upload에 array ( 'test_form'=> false)를 두 번째 인수로 전달하면 문제없이 파일을 업로드합니다. add_meta_box 호출에는 추가 괄호도 있습니다. 답변에 수정 사항을 추가하여 작동 시키십시오.
매니 Fleurmond

구현 노트로- upload-attachment네이티브 wp_ajax_upload_attachment()핸들러 를 트리거 하고 일부 조정을 통해 사용자 정의 업로드 핸들러가 필요하지 않은 동작과 양식 및 스크립트 부분을 설정할 수 있습니다 .
Rarst

13

@One Trick Pony의 답변을 확장했습니다. 이것은 파일을 적절한 파일에 업로드하는 것 외에도 해당 파일을 첨부 파일로 저장합니다.

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

1
여기에 작은 실수가 있다고 생각하십시오. wp_insert_attachment 호출의 마지막 매개 변수는 $ status [ 'url']이 아니라 $ status [ 'file']이어야합니다. 로컬 경로 여야합니다.
MathSmath
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.