I would like to make custom form with image field, but there is no image type in
http://api.drupal.org/api/drupal/developer!topics!forms_api_reference.html/7
so instead i use managed_file type but it doesn't give an image preview. My question is how to get image preview like this from core Image field?
My code looks like this:

<?php
$element['type_image'] = array(
    '#title' => t('Image'),
    '#type' => 'managed_file',
    '#default_value' => variable_get('type_image', ''),
    '#upload_location' => 'public://multipurpose_field_images/',
  );
?>

Comments

dhm’s picture

Hi janekD7,

Please have you a solution about your bugs, i have the same problem...

Thanks in advance,

DHM.

ahm_hefni’s picture

I make a question in stackexchange you can follow this link

janekD7’s picture

Finally I found a solution somewhere on the Internet but forgot to post it here. So now I can only try to remember how is it working (it's now a part of working module, so it works for sure).
NOTE: multifield is the name of the module


/**
 * Implements hook_field_widget_form().
 */
function multifield_field_widget_form(&$form, &$form_state, $field, $instance, $langcode, $items, $delta, $element) {

  //Get the default format for user
  $default_format  = array_shift(filter_formats($GLOBALS['user']))->format;

  $field_name = $instance['field_name'];

  $item =& $items[$delta];

  switch($instance['widget']['type']) {

    case 'multifield_base_widget':
      $element['img1_upload'] = array(
        '#title' => t('Image'),
        '#type' => 'managed_file',
        '#upload_location' => 'public://multifield_images/',
        '#default_value' => isset($item['img1_upload']) ? $item['img1_upload'] : 0,
        // assign #theme directly to the managed_file in other case it won't be
        // rebuilt after file upload
        '#theme' => 'image_multifield_multitype',
      );
  }
  return $element;
}

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

/**
 * Returns HTML for a managed file element with thumbnail.
 */
function theme_image_multifield_multitype($variables) {
  $element = $variables['element'];

  $output = '';

  $base = drupal_render_children($element); // renders element as usual

  if($element['fid']['#value'] != 0) {
    // if image is uploaded show its thumbnail to the output HTML
    $output .= '<div class="multifield-thumbnail">';
    $output .= theme('image_style', array('style_name' => 'thumbnail', 'path' => file_load($element['fid']['#value'])->uri, 'getsize' => FALSE));
    $output .= '</div>';
  }

For sure it's not copy/paste code but I think it can help somehow if you encounter similar problem.

sri20198’s picture

Your code worked great with the theme function. (I added "return $output" in theme_image_multifield_multitype for it to show up).

However, when using the theme function, the remove button goes off. I am presuming that the image form element is getting replaced with the return value of the theme function.

When the theme function is not used to show the image thumbnail, the form element gives the link to the upload image file and replaces the upload_button with remove_button.

Any ideas on how we can show the remove button after the thumbnail has been rendered?

sri20198’s picture

To show the remove button, renamed $base to $output and moved it inside the condition:

/**
 * Returns HTML for a managed file element with thumbnail.
 */
function theme_image_multifield_multitype($variables) {
  $element = $variables['element'];

  $output = '';


  if($element['fid']['#value'] != 0) {
    // if image is uploaded show its thumbnail to the output HTML
    $output .= '<div class="multifield-thumbnail">';
    $output .= theme('image_style', array('style_name' => 'thumbnail', 'path' => file_load($element['fid']['#value'])->uri, 'getsize' => FALSE));
    $output .= drupal_render_children($element); // renders rest of the element as usual
    $output .= '</div>';
  }
return $output; // of course, has to be returned back
anou’s picture

Hello,

The only thing is that if you mix '#theme' with '#state', the field is always shown...

<?php
$element['type_image'] = array(
    '#title' => t('Image'),
    '#type' => 'managed_file',
    '#default_value' => variable_get('type_image', ''),
    '#upload_location' => 'public://multipurpose_field_images/',
    '#theme' => 'image_multifield_multitype',
    '#states' => array(
        'visible' => array('my-jquery-selector' => array('value' => $value), 
      ),
    ),
  );
?>

If I remove the '#theme' line the states works again...
I can't find why? Any ideas?

And Thanks for the code.

David THOMAS
http://www.smol.org

panditvarun20’s picture

This code is awesome... I have used it & it has created a preview form uploaded image.
Thanks Dude!

Varun Kr Pandey

panditvarun20’s picture

Hey can you tell me that how can I use java script in this form to crop the image at uploading time..while showing its preview in the widget form?

Actually I want to do a field image with crop option at the time of loading the image or at view of image so that it can be useful

Varun Kr Pandey

yark’s picture

How i can implement reverse goal?
I want to add imageField to my content type and preserve all its functionality as max size, auto resizing etc. but get rid all that magic with ajax uploading, showing thumbnail and also surrounding fieldset in addition form. So i want to have plain (classic) "select file" fields in addition form but remain all internal D7 logic.

jaypan’s picture

What does that have to do with showing an image preview in the form API (the topic of this thread)?

Contact me to contract me for D7 -> D10/11 migrations.

yark’s picture

That about not showing an image preview in the form API.
I believe i need to use form_alter but i'm unable to do that on my own. Also i can't find answer to my question in documentation so idecided to ask may question in related conversation. Is i doing it wrong?

jaypan’s picture

The default is that an image preview isn't shown. Your question is about removing Ajax functionality - a different topic altogether.

Contact me to contract me for D7 -> D10/11 migrations.

rakesh.nimje84@gmail.com’s picture

I want help for owlcarousel display for hook theme_file_widget_multiple in file upload preview for drupal 7 with help of owlcarousel module.

shubham1310’s picture

Hi,

I am trying the above threads for generating an image field in custom form. But it is not showing any thumbnail when we upload the file. I have checked the theme function and it is getting fid as 0. Please help me to get it working.

Thanks

mozh92’s picture

strykaizer’s picture