मेटा-बॉक्स में Plupload इंटरग्रेशन?

Question

मुझे पता है कि वर्डप्रेस 3.3 के लिए प्लूप लोड नया अपलोड इंजन होने जा रहा है, लेकिन मैं सोच रहा था कि क्या वर्डप्रेस के साथ एकीकृत होने पर अभी तक कोई प्रलेखन है।

मेरी विशेष रूप से एक बार जब आप चाहते हैं कि मीडिया को अपलोड करने के लिए plUpload jQuery वस्तु से एक प्रतिक्रिया एकत्र करने के लिए कैसे और एक गैलरी बनाने के लिए एक मेटा बॉक्स में एक ही कार्यक्षमता का उपयोग कैसे करेंगे?

किसी ने इसके साथ खेला है, फिर भी?

Comments

इनाम के लिए धन्यवाद, हालांकि एक अच्छा मौका है जब तक कोई जवाब नहीं आएगा जब तक वर्डप्रेस 3.3 की आधिकारिक रिलीज नहीं होगी

— मैन्नी फ्लेममंड

वहाँ भी एक अच्छा मौका मैं इस सप्ताह के अंत में इस पर एक नज़र रखना होगा :-) मैं महीनों के लिए 3.3 का उपयोग कर रहा हूँ, और पहले आर सी बूँदें से पहले इस सटीक बात को लिखने की जरूरत है ...

— EAMann

यहाँ नए अपलोडर का उपयोग करता है, plupload ( plupload.com ) jQuery प्लगइन के लिए एक कड़ी है । मुझे इस बात का मलाल है कि वे इसे कैसे लागू करते हैं, लेकिन यह नहीं बता सकते कि किसी फ़ाइल के सफलतापूर्वक अपलोड होने पर नया कार्यान्वयन कैसे प्रतिक्रिया प्राप्त करता है।

— मैन्नी फ्लेममंड

Answer 1

मेरी विशेष रूप से कैसे plUpload jQuery वस्तु से एक प्रतिक्रिया एकत्र करने के लिए एक बार यह मीडिया है कि आप चाहते हैं और कैसे एक गैलरी बनाने के लिए एक मेटा बॉक्स में एक ही कार्यक्षमता का उपयोग करेगा अपलोड किया है?

एक विशिष्ट फ़ाइल है जो इस कार्यक्षमता को संभालती है /wp-includes/js/plupload/handlers.dev.js:। इस फ़ाइल में सभी हुक और ट्रिगर्स होते हैं जो अपलोडर को Plupload (थर्ड-पार्टी ड्रैग / ड्रॉप मल्टी-फाइल सिस्टम) टाई करते हैं।

ऐसी दो घटनाएं हैं जिन्हें आप देखना चाहते हैं: "FileUploaded" और "Upload Complete"

FileUploaded

याद रखें, नया अपलोडर एक साथ कई फाइलें अपलोड करने में सक्षम है। इसलिए यदि कतार में प्रत्येक फ़ाइल के अपलोड होने के बाद आप कुछ करना चाहते हैं, तो आप इस ईवेंट में बाइंड करने के लिए jQuery का उपयोग करेंगे।

उदाहरण के लिए, वर्डप्रेस निम्नलिखित को बांधता है:

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

यहां uploadSuccessफ़ंक्शन छवि थंबनेल को संभालता है, सर्वर से अटैचमेंट मेटा प्राप्त करता है, और बटन को राइट ऑब्जेक्ट पर संपादित / हटाता है।

अपलोड पूरा हुआ

UploadComplete घटना कतार में सब कुछ समाप्त हो जाने के बाद आग लग जाएगी । यदि आप संपूर्ण डाउनलोड समाप्त होने के बाद एक सामान्य सफाई ऑपरेशन को फायर करना चाहते हैं, तो यह वह है जिसे आप बांधना चाहते हैं।

उदाहरण के लिए, वर्डप्रेस निम्नलिखित को बांधता है:

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

यहां uploadCompleteफ़ंक्शन केवल पेज पर "गैलरी सम्मिलित करें" बटन को सक्षम करता है।

दुर्भाग्य से ...

... हमें इन घटनाओं के लिए बाध्य करने का कोई तरीका प्रतीत नहीं होता है। uploaderवस्तु में एक बंद करने के भीतर मौजूद है handlers.jsफ़ाइल, और plupload ही मौजूदा उदाहरणों को संदर्भित करने के लिए एक रास्ता नहीं है। आप इसे हटाने और एक कस्टम ईवेंट जोड़ने के लिए एक साधारण jQuery चयनकर्ता का उपयोग नहीं कर सकते ... इसलिए हम वहां भाग्य से बाहर हैं।

एक ओर, आप अपने स्वयं के सिस्टम में इन कस्टम घटनाओं का उपयोग कर सकते हैं। बस handlers.jsअपनी खुद की घटनाओं के साथ फ़ाइल के अपने संस्करण को स्पिन करें और आप जो चाहें कर सकते हैं। लेकिन मौजूदा अपलोडर के लिए, आप मौजूदा एपीआई के साथ फंस गए हैं।

ध्यान रखें, कि नया प्लूप लोडर उसी तरीके से कॉल करता है जैसे पुराने फ्लैश अपलोडर ने किया था। इसलिए मेरा सबसे अच्छा अनुमान है कि आपके पास मौजूद कोई भी हैक या एकीकरण काम करना जारी रखना चाहिए।

परीक्षण कि धारणा

मेरे पास एक प्लगइन है जो फ़ाइल अपलोड को अपलोड करने के लिए मौजूदा अपलोडर का उपयोग करता है और कस्टम मेटा फ़ील्ड में URL प्रदर्शित करता है। यह पुराने अपलोडर के साथ जादू की तरह काम करता है, इसलिए मैंने WP 3.3 में इसे देखने के लिए निकाल दिया ताकि यह नए अपलोडर के साथ भी काम कर सके ।

और यह करता है!

तो अगर आप पहले से ही मीडिया अपलोड करने वाले के साथ एकीकृत कर रहे हैं, आपके सिस्टम होना चाहिए अभी भी बिना किसी परिवर्तन के नए सिस्टम के साथ काम करते हैं।

Answer 2

(यह केवल एक व्यावहारिक उदाहरण है जो एमान के उत्तर पर आधारित है)

// 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 घटनाओं रहे हैं, इसके प्रलेखन की जाँच करें ....

Comments

मैंने इस कोड की कोशिश की है और अब तक यह कुछ भी नहीं करता है। छवि अपलोड करने के लिए लगता है, लेकिन मुझे नहीं पता कि मुझे कहाँ और मुझे कंसोल से कोई जवाब नहीं मिला

— मैन्नी फ्लेममंड

ठीक है, समस्या पाई गई: किसी कारण से $ _FILES ['async-upload'] आपने wp_handle_upload को भेजा है, उक्त फ़ंक्शन में एक चेक पास नहीं करता है। यदि आप wp_handle_upload में दूसरे तर्क के रूप में सरणी ('test_form' => false) पास करते हैं, तो यह फ़ाइल को समस्या के बिना अपलोड करता है। Add_meta_box में कॉल में एक अतिरिक्त कोष्ठक भी है। मैंने आपके उत्तर में संपादन जोड़ दिया है जिससे इसे काम करना चाहिए।

— मैन्नी फ्लेममंड

कार्यान्वयन नोट के रूप में - कार्रवाई को सेट कर सकते हैं upload-attachmentजो देशी wp_ajax_upload_attachment()हैंडलर को ट्रिगर करेगा और कुछ ट्विकिंग के साथ पूरी तरह से कस्टम अपलोड हैंडलर की आवश्यकता नहीं है, बस फॉर्म और स्क्रिप्ट भागों।

— रार्स्ट

Answer 3

यहाँ @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;
});
?>

Comments

सोचें कि यहां एक छोटी सी गलती है - wp_insert_attachment कॉल के अंतिम पैराम को $ स्थिति ['url'] के बजाय $ स्थिति ['फ़ाइल'] होना चाहिए। बहुत यकीन है कि यह स्थानीय पथ होना चाहिए।

— मथसम्मथ