ফর্ম এপিআই ব্যবহার করে আপলোড করার পরে চিত্রের পূর্বরূপ দেখুন

Question

আমি managed_fileফর্ম এপিআই টাইপ ব্যবহার করে একটি চিত্র ফাইল আপলোড করেছি , তবে চিত্রটি আপলোড করার পরে এটি ক্ষেত্রের পাশে থাম্বনেল হিসাবে উপস্থিত হবে না। যা রেন্ডার করা হয় তা হ'ল চিত্রের লিঙ্ক এবং একটি ছোট আইকন সহ চিত্রের ফাইলের নাম।

আমি কীভাবে চিত্রটি আপলোড করার পরে থাম্বনেইলটি দেখাব (মূল চিত্র ক্ষেত্র থেকে চিত্র পূর্বরূপটির মতো)?

এছাড়াও আমি কীভাবে এর পাশে একটি ডিফল্ট চিত্র প্রদর্শন করতে পারি (যদি এটির একটি ডিফল্ট মান থাকে)?

এটি আমার কোড:

$form['logo'] = array(
      '#title' => t('Logo'),
      '#type' => 'managed_file',
      '#required' => TRUE,
      '#default_value' => variable_get('logo', ''),
      '#upload_location' => 'public://',
      '#upload_validators' => array(
            'file_validate_extensions' => array('gif png jpg jpeg'),
            'file_validate_size' => array(0.3*1024*1024),
  )

Answer 1

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

 // THIS IS THE FILE FIELD  
 $form['logo'] = array(
  '#type' => 'managed_file',
  '#title' => t('Logo'),
  '#description' => t('Allowed extensions: gif png jpg jpeg'),
  '#upload_validators' => array(
    'file_validate_extensions' => array('gif png jpg jpeg'),
    // Pass the maximum file size in bytes
    'file_validate_size' => array(1 * 1024 * 1024),
  ),
  '#theme' => 'tbs_thumb_upload',
  '#upload_location' => 'public://society/',
  '#attributes' => array('default_image_path' => TBS_IMAGE_DEFAULT_SOCIETY)
  );

 // THIS IS THE THEME FILE : THEME : tbs_thumb_upload : Theme file code
 if (!empty($form['#file'])) {
   $uri = $form['#file']->uri;
   $desc = FALSE;
 }else {
   $uri = $form['#attributes']['default_image_path'];
   $desc = TRUE;
 }

 // Render form element
 print drupal_render_children($form);

Comments

কোডের শেষ অংশটি if (!empty($form['#file'])) {`মুদ্রণ_রেন্ডার_চিল্ডেন ($ ফর্ম); to .tpl.phpফাইলটিতে লিখবে ? যদি না হয় তবে আমি এই অংশটি কোথায় লিখব?

— শুভজ্যোতি দে

Answer 2

ক্ষেত্রের থিমটি সংজ্ঞায়িত করুন এবং আপনি সবেমাত্র আপলোড করা চিত্রটির পূর্বরূপ দেখতে কোড কাঠামোটি অনুকরণ করুন। আমার সমাধানটি নিম্নরূপ:

$form['abc_field']['abc_filename'] = array(
        '#type' => 'managed_file',
        '#title' => t('abc image'),
        '#upload_validators' => array(
            'file_validate_extensions' => array('gif png jpg jpeg'),
            'file_validate_size' => array(1 * 1024 * 1024),
        ),
        '#theme' => 'abc_thumb_upload',
        '#upload_location' => 'public://abc/'
    );

আপনার হুক_থমে (),

return array(
    'abc_thumb_upload' => array(
        'render element' => 'element',
        'file'           => 'abc.module',
));

আপনার থিম_এবসি_থম্ব_আপলোড () এ,

function theme_abc_thumb_upload($variables) {

    $element = $variables['element'];

    if (isset($element['#file']->uri)) {
        $output = '<div id="edit-logo-ajax-wrapper"><div class="form-item form-type-managed-file form-item-logo"><span class="file">';
        $output .= '<img height="50px" src="' . file_create_url($element['#file']->uri) . '" />';
        $output .= '</span><input type="submit" id="edit-' . $element['#name'] . '-remove-button" name="' . $element['#name'] . '_remove_button" value="Remove" class="form-submit ajax-processed">';
        $output .= '<input type="hidden" name="' . $element['#name'] . '[fid]" value="' . $element['#file']->fid . '">';

        return $output;
    }
}

Comments

ব্যবহারকারীর image_style_url('thumbnail', $element['#file']->uri)জায়গায় ব্যবহার করা ভাল be file_create_url($element['#file']->uri)ব্যবহারকারী যদি কোনও খারাপ কিছু আপলোড করে তবে বর্তমান কোড মারাত্মকভাবে বিন্যাসটি ভেঙে ফেলতে পারে।

— মওট

একটা অনুরূপ সমাধান এখানে দেওয়া হল: stackoverflow.com/questions/18997423/...

— ognockocaten

Answer 3

মাত্রা সম্পর্কে এই বৈধতা যাচাই করুন ফাইল_ডিয়ালিটি_আইমেজ_রেসোলিউশন :

$form['logo'] = array(
      '#title' => t('Logo'),
      '#type' => 'managed_file',
      '#required' => TRUE,
      '#default_value' => variable_get('logo', ''),
      '#upload_location' => 'public://',
      '#upload_validators' => array(
            'file_validate_extensions' => array('gif png jpg jpeg'),
            'file_validate_size' => array(0.3*1024*1024),
            'file_validate_image_resolution'=>array('100x100'),
  )

Answer 4

অপসারণ বোতামটির জন্য এইচটিএমএল হ্যাক করা আমার পক্ষে কাজ করে না। চিত্রটি সরিয়ে না দিয়ে পৃষ্ঠাটি রিফ্রেশ হয়। পরিবর্তে আমি theme_image_widgetখুঁজে পাওয়া কোর ইমেজ ফিল্ডের কলব্যাক থেকে অনুলিপি করেছি docroot/modules/image/image.field.inc।

/**
* Implements theme_mymodule_thumb_upload theme callback.
*/
function theme_mymodule_thumb_upload($variables) {
  $element = $variables['element'];
  $output = '';
  $output .= '<div class="image-widget form-managed-file clearfix">';

  // My uploaded element didn't have a preview array item, so this didn't work
  //if (isset($element['preview'])) {
  //  $output .= '<div class="image-preview">';
  //  $output .= drupal_render($element['preview']);
  //  $output .= '</div>';
  //}

  // If image is uploaded show its thumbnail to the output HTML
  if ($element['fid']['#value'] != 0) {
    $output .= '<div class="image-preview">';

    // Even though I was uploading to public:// the $element uri was pointing to temporary://system, so the path to the preview image was a 404
    //$output .= theme('image_style', array('style_name' => 'thumbnail', 'path' => file_load($element['fid']['#value'])->uri, 'getsize' => FALSE));

    $output .= theme('image_style', array('style_name' => 'thumbnail', 'path' => 'public://'.$element['#file']->filename, 'getsize' => FALSE));
    $output .= '</div>';
  }

  $output .= '<div class="image-widget-data">';

  if ($element['fid']['#value'] != 0) {
    $element['filename']['#markup'] .= ' <span class="file-size">(' . format_size($element['#file']->filesize) . ')</span> ';
  }

  // The remove button is already taken care of by rendering the rest of the form. No need to hack up some HTML!
  $output .= drupal_render_children($element);

  $output .= '</div>';
  $output .= '</div>';

  return $output;
}

উপাদানটি রেন্ডার করতে এই থিম ফাংশনটি ব্যবহার করুন:

/**
* Implements hook_theme().
*/
function mymodule_theme() {
  return array(
    'mymodule_thumb_upload' => array(
      'render element' => 'element',
    )
  );
}

ফর্ম উপাদান সংজ্ঞা:

$form['upload_image'] = array(
  '#type' => 'managed_file',
  '#default_value' => $value,
  '#title' => t('Image'),
  '#description' => t('Upload an image'),
  '#upload_location' => 'public://',
  '#theme' => 'mymodule_thumb_upload',
  '#upload_validators' => array(
    'file_validate_is_image' => array(),
    'file_validate_extensions' => array('jpg jpeg gif png'),
    'file_validate_image_resolution' => array('600x400','300x200'),
  ),
);

Comments

এই উত্তরটি হওয়া উচিত, অবশেষে এজাক্স কাজ করে, থেক্স ইউ !!!!

— ডার্কটেক

Answer 5

আপনার চিত্রের পূর্বরূপের জন্য মার্কআপটি রাখতে অন্য ফর্ম উপাদান যুক্ত করুন। নীচের কোডে, $ v এর ফর্মের মানগুলি রয়েছে। আপনার নির্দিষ্ট ক্ষেত্রে এগুলি কোনও নোড থেকে ফর্মের রাজ্য বা অন্য কোথাও থেকে টেনে আনতে পারে। এটি একটি অ্যারেতে কাস্ট করা একটি ফাইল অবজেক্ট।

// If there is a file id saved
if (!empty($v['fid'])) {
  // If there is no file path, a new file is uploaded
  // save it and try to fetch an image preview
  if (empty($v['uri'])) {
    $file = file_load($v['fid']);
    // Change status to permanent so the image remains on the filesystem. 
    $file->status = FILE_STATUS_PERMANENT;
    $file->title  = $v['title'];
    // Save.
    file_save($file);
    global $user;
    file_usage_add($file, 'node', 'node', $user->uid);
    $v = (array)$file;
  }
  $form['photos']['items'][$i]['preview']['#markup'] = theme(
    'image_style',
    array(
      'style_name' => 'form_image_preview',
      'path' => file_build_uri(file_uri_target($v['uri']))
    )
  );
}

নোট করুন যে আমি স্থিতি এবং পুনরায় সংরক্ষণের জন্য ফাইলের স্থিতি সেট করেছি। এটি সঠিকভাবে প্রাকদর্শন করার জন্য আপলোড হওয়া চিত্রগুলির জন্য। টেম্প স্টোরেজে থাকা চিত্রগুলির জন্য চিত্র শৈলীগুলি তৈরি করা যায় না, সুতরাং আপনাকে সেগুলি হিসাবে অনুমতি হিসাবে ফ্ল্যাগ করতে হবে। আপনার ব্যবহারের ক্ষেত্রে এবং কর্মপ্রবাহের উপর নির্ভর করে আপনাকে "অনাথ" চিত্রগুলিকে সম্বোধন করতে হতে পারে।

আমার ফর্ম কাঠামো ($ ফর্ম ['ফটো'] [['আইটেম'] [[$ i])) বহু-প্রবেশ চিত্রের ক্ষেত্রের জন্য। আমার কাছে একটি থিম টেমপ্লেট রয়েছে যা এগুলিকে একত্রিত করে এগুলিকে drupal_add_tabledrag এ রাখে । আপনার ফর্ম অ্যারের গঠন সম্ভবত পৃথক হবে।

Comments

ধন্যবাদ জেসন তবে আমি যদি আমার কাছে কোনও তথ্য থাকে এবং আমি ফর্মটিতে এটি দেখতে চাই তবে এই বিষয়টি আমি মনে করি (আমি মনে করি $ v এমন একটি বস্তু যা চিত্রের ইউরি আছে) আমি চিত্রের মতো চিত্রটির পূর্বরূপ করতে চাই ফিল্ডের পাশে আপলোড বোতাম ব্যবহার করে ছবিটি আপলোড করার সময় এটি ক্ষেত্রের পাশে উপস্থিত হয়

— আহমেদ

আমি এখানে কি করছি। $ v ফর্ম আইটেমের মান। একটি এজেএক্স / এএএএএচএফের সময় ফর্মটি পুনরায় জেনারেট করা হয় এবং নতুন আপলোড করা ফাইলের পাশের পূর্বরূপ চিত্রটি দেখানোর জন্য মানটি ব্যবহৃত হবে। $ ফর্ম ['ফটো'] ['আইটেম'] আপনার পূর্বরূপ এবং ফাইল আপলোড উইজেটকে "গ্রুপ" করার একটি মোড়ক। $ ফর্ম ['ফটো'] ['আইটেম'] [এক্স] ['ফটো'] আপনার উইজেট হবে।

— জেসন স্মিথ

আমি এএএএএচএইচ ব্যবহার করছি না (কেবলমাত্র দ্রুপাল form ফর্ম এপিআই) এবং আপলোড করছি সমস্ত ফর্মটি রিফ্রেশ করুন

— আহমেদ

এটি করার কোন উপায় নেই যে আমি সচেতন যে এটি এএএএক্সএক্স / এএএএএচএস ব্যবহার করে না, দুঃখিত আমি আরও সাহায্য করতে পারিনি: /

— জেসন স্মিথ