फॉर्म एपीआई का उपयोग करके अपलोड करने के बाद पूर्वावलोकन छवि

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'])) {में कोड का अंतिम भाग `drupal_render_children ($ फॉर्म);` प्रिंट करेगा .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)स्थान पर उपयोग करना बेहतर होगा file_create_url($element['#file']->uri)।

— मोलॉट

यहाँ एक बहुत ही समान समाधान है: stackoverflow.com/questions/18997423/…

— ognockocaten

Answer 3

आयाम के बारे में इस सत्यापन की जाँच करें file_validate_image_resolution :

$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

निकालें बटन के लिए HTML हैक करना मेरे लिए काम नहीं करता है। पेज इमेज को हटाए बिना रिफ्रेश करता है। इसके बजाय मैंने कोर इमेज फील्ड के 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

यह एक जवाब होना चाहिए, आखिरकार अजाक्स काम करता है, thx u !!!!

— DarkteK

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

धन्यवाद jason, लेकिन मुझे लगता है कि अगर मेरे पास एक डेटा है और मैं इसे फॉर्म में देखना चाहता हूं (मुझे लगता है कि $ v एक ऐसी वस्तु है जिसमें छवि का uri है) मैं छवि का पूर्वावलोकन करना चाहता हूं जैसे कि छवि क्षेत्र में फ़ील्ड के बगल में दिखाई देने वाले अपलोड बटन का उपयोग करके छवि अपलोड करते समय यह फ़ील्ड के बगल में दिखाई देता है

— अहमद

यही मैं यहां कर रहा हूं। $ v फॉर्म आइटम का मूल्य है। AJAX / AHAH रिफ्रेश के दौरान फॉर्म को फिर से बनाया जाता है और नए अपलोड किए गए फ़ाइल के बगल में पूर्वावलोकन छवि दिखाने के लिए मूल्य का उपयोग किया जाएगा। $ फॉर्म ['तस्वीरें'] ['आइटम'] आपके पूर्वावलोकन और फ़ाइल अपलोड विजेट "समूह" के लिए एक आवरण है। $ फॉर्म ['फोटो'] ['आइटम'] [x] ['फोटो'] आपका विजेट होगा।

— जेसन स्मिथ

मैं AHAH (सिर्फ Drupal 7 form api) का उपयोग नहीं कर रहा हूँ और सभी ताज़ा ताज़ा अपलोड कर रहा हूँ

— अहमद

ऐसा करने का कोई तरीका नहीं है कि मुझे पता है कि AJAX / AHAH का उपयोग नहीं करता है, क्षमा करें मैं अधिक मदद नहीं कर सकता: /

— जेसन स्मिथ