মেটা-বাক্সে প্লুপলোড লোড সংহতকরণ?

Question

আমি জানি যে প্লুপলোডটি ওয়ার্ডপ্রেস ৩.৩ এর জন্য নতুন আপলোড ইঞ্জিন হতে চলেছে তবে আমি ভাবছিলাম যে এটি ওয়ার্ডপ্রেসের সাথে কীভাবে সংহত হয় সে সম্পর্কে এখনও কোনও ডকুমেন্টেশন রয়েছে কিনা।

আমার বিশেষভাবে কীভাবে প্লাগ আপলোড জিকুয়ারি অবজেক্ট থেকে প্রতিক্রিয়া সংগ্রহ করবেন একবার আপনি যে মিডিয়াটি চান তা আপলোড করে এবং গ্যালারী তৈরির জন্য কীভাবে কোনও মেটা বাক্সে একই কার্যকারিতা ব্যবহার করবে?

কেউ কি এর সাথে চারপাশে খেলেছে, এখনও আছে?

Comments

অনুগ্রহের জন্য ধন্যবাদ, যদিও ওয়ার্ডপ্রেস ৩.৩ এর অফিশিয়াল রিলিজ না হওয়া পর্যন্ত উত্তর আসবে না

— ম্যানি ফ্লুরমন্ড

এই সপ্তাহান্তে আমি এটির জন্য একটি ভাল সুযোগও পেয়েছি :-) আমি এখন কয়েক মাস ধরে ৩.৩ ব্যবহার করছি, এবং প্রথম আরসি ড্রপ হওয়ার আগে এই সঠিক জিনিসটি লিখতে হবে ...

— ইমন

নতুন আপলোডার, প্লুপলোড ( plupload.com ) ব্যবহার করে jQuery প্লাগইনে একটি লিঙ্ক এখানে রয়েছে । তারা কীভাবে এটি বাস্তবায়ন করে সে সম্পর্কে আমার সংক্ষেপণ রয়েছে তবে কোনও ফাইল সফলভাবে আপলোড করা হলে নতুন বাস্তবায়ন কীভাবে প্রতিক্রিয়া গ্রহণ করে তা বলতে পারি না।

— ম্যানি ফ্লুরমন্ড

Answer 1

আমার বিশেষভাবে কীভাবে প্লাগ আপলোড জিকুয়ারি অবজেক্ট থেকে প্রতিক্রিয়া সংগ্রহ করবেন একবার আপনি যে মিডিয়াটি চান তা আপলোড করে এবং গ্যালারী তৈরির জন্য কীভাবে কোনও মেটা বাক্সে একই কার্যকারিতা ব্যবহার করবে?

একটা নির্দিষ্ট যে ফাইলটি এই কার্যকারিতা পরিচালনা আছে: /wp-includes/js/plupload/handlers.dev.js। এই ফাইলটিতে সমস্ত হুক এবং ট্রিগার রয়েছে যা প্লুপলোড (তৃতীয় পক্ষের ড্রাগ / ড্রপ মাল্টি-ফাইল সিস্টেম) টাইপ করে to

দুটি ইভেন্ট রয়েছে যা আপনি দেখতে চাইতে পারেন: "ফাইলআপলোড" এবং "আপলোড সম্পূর্ণ"

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 নিজেই বিদ্যমান দৃষ্টান্ত উল্লেখ একটি উপায় নেই। আপনি এটিকে স্নিগ্ধ করতে এবং একটি কাস্টম ইভেন্ট যুক্ত করতে কোনও সাধারণ জিকুয়েরি নির্বাচক ব্যবহার করতে পারবেন না ... সুতরাং আমরা ভাগ্য থেকে দূরে আছি।

একদিকে, আপনি নিজের সিস্টেমে এই কাস্টম ইভেন্টগুলি ইচ্ছামত ব্যবহার করতে পারেন। handlers.jsআপনার নিজের ইভেন্টগুলির সাথে কেবল ফাইলটির নিজস্ব সংস্করণটি স্পিন করুন এবং আপনি যা চান তা করতে পারেন। তবে বিদ্যমান আপলোডারের জন্য আপনি বিদ্যমান এপিআইতে আটকে আছেন।

মনে রাখবেন, নতুন প্লুপলোডার একই পদ্ধতিতে একই সময়ে কল করে যা পুরানো ফ্ল্যাশ আপলোডার করেছিল er সুতরাং আমার সর্বোত্তম অনুমান যে আপনার বিদ্যমান বিদ্যমান হ্যাক বা সংহতকরণগুলি কাজ চালিয়ে যাওয়া উচিত।

সেই অনুমানের পরীক্ষা করা

আমার কাছে একটি প্লাগইন রয়েছে যা ফাইল সংযুক্তিগুলি আপলোড করতে এবং একটি কাস্টম মেটা ক্ষেত্রের URL প্রদর্শন করতে বিদ্যমান আপলোডার ব্যবহার করে। এটি পুরানো আপলোডারের সাথে ম্যাজিকের মতো কাজ করেছিল, তাই নতুন আপলোডারের সাথে এটিও কাজ করে কিনা তা দেখার জন্য আমি ডাব্লুপি ৩.৩ এ এটি বহিস্কার করেছি ।

এবং এটা!

সুতরাং আপনি যদি মিডিয়া আপলোডারের সাথে ইতিমধ্যে সংহত হয়ে থাকেন তবে আপনার সিস্টেমটি এখনও কোনও পরিবর্তন ছাড়াই নতুন সিস্টেমের সাথে কাজ করা উচিত ।

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

আরও কিছু প্লুপলোড ইভেন্ট রয়েছে যা আপনি ব্যবহার করতে পারেন, এর ডকুমেন্টেশনটি দেখুন ...

Comments

আমি এই কোডটি যেমন চেষ্টা করেছি এবং এখনও পর্যন্ত এটি কিছুই করে না। চিত্রটি আপলোড করার মতো মনে হচ্ছে তবে আমি কোথায় জানি না এবং আমি কনসোল থেকে কোনও প্রতিক্রিয়া

— পাইনি

ঠিক আছে, সমস্যাটি খুঁজে পেয়েছেন: কোনও কারণে আপনি wp_handle_upload এ পাঠিয়েছেন $ _FILES ['async-আপলোড'] বলে ফাংশনটিতে একটি চেক পাস বলে মনে হচ্ছে না। আপনি যদি অ্যারে ('টেস্ট_ফর্ম' => মিথ্যা) কে দ্বিতীয় যুক্তি হিসাবে ডাব্লুপি_হ্যান্ডল_আপলোড হিসাবে পাস করেন তবে এটি কোনও সমস্যা ছাড়াই ফাইল আপলোড করে। যোগ_মেটা_বক্সে কলটিতে একটি অতিরিক্ত বন্ধনী রয়েছে। আমি আপনার উত্তরে সম্পাদনাগুলি যুক্ত করেছি যাতে এটি কার্যকর হয়।

— ম্যানি ফ্লুরমন্ড

বাস্তবায়ন নোট হিসাবে - এমন ক্রিয়া সেট করতে পারে upload-attachmentযা দেশীয় wp_ajax_upload_attachment()হ্যান্ডলারকে ট্রিগার করবে এবং কিছু টুইটের সাথে সম্পূর্ণরূপে কাস্টম আপলোড হ্যান্ডলারের প্রয়োজন হবে না, কেবল ফর্ম এবং স্ক্রিপ্ট অংশগুলি।

— রর্স্ট

Answer 3

এখানে @ এক ট্রিক পোনির উত্তরটির সম্প্রসারণ করা হল। এটি, যথাযথভাবে ফাইল আপলোড করার সাথে সাথে, অনুরোধকৃত ফাইলটিকে সংযুক্তি হিসাবেও সংরক্ষণ করবে:

<?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'] এর চেয়ে 'স্ট্যাটাস [' ফাইল '] হওয়া উচিত। খুব নিশ্চিত এটির স্থানীয় পথ হওয়া দরকার।

— ম্যাথসম্যাট