Take the 2-minute tour ×
Drupal Answers is a question and answer site for Drupal developers and administrators. It's 100% free, no registration required.

I uploaded an image file using the managed_file Form API type, but after uploading the image it does not appear as a thumbnail beside the field. What is rendered is the file name of the image with a link to the image and a small icon.

How do I show the thumbnail of the image after uploading it (like the image preview from the core Image field)?

Also how can I show a default image beside it (if it has a default value)?

This is my code:

$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),
  )
share|improve this question
add comment

4 Answers

up vote 2 down vote accepted

I have resolved the issue with a simple fix. You can add a theme to the form element "tbs_thumb_upload" and in the theme file hand the element as mentioned in the theme file code.

 // 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);
share|improve this answer
add comment

Define the theme in the field, and simulate the code structure to preview the image that you just upload. My solution is as follows,

$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/'
    );

In your hook_theme(),

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

In your theme_abc_thumb_upload(),

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;
    }
}
share|improve this answer
2  
Would be better to use image_style_url('thumbnail', $element['#file']->uri) in place of file_create_url($element['#file']->uri) - current code can seriously break layout if user uploads something bad. –  Mołot Jul 1 '13 at 9:24
add comment

Add another form element to contain the markup for your image preview. In the below code, $v contains the form values of interest. Your specific case may pull them from a node, from form state or somewhere else. It is a file object cast to an array.

// 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']))
    )
  );
}

Note that I set the file status to permanent and re-save. This is for the images that are uploaded to be previewed correctly. Image styles can't be generated for images in temp storage, so you have to flag them as perm. Depending upon your use case and workflow, you may have to address "orphaned" images.

My form structure ($form['photos']['items'][$i]) is for a multi-entry image field. I have a theme template that gathers them up and puts them in drupal_add_tabledrag. Your form array structure will likely differ.

share|improve this answer
    
thanks jason but I think this in case if I have a data and I want to view it in the form (I think $v is an object that have uri of the image) I want to make a preview of the image like in image field when uploading the image using upload button beside the field it appear beside the field –  Ahmed Jul 26 '12 at 8:50
    
That's what I'm doing here. $v is the value of the form item. During an AJAX/AHAH refresh the form is regenerated and the value will be used to show the preview image next to the newly uploaded file. $form['photos']['items'] is a wrapper to "group" your preview and file upload widget. $form['photos']['items'][x]['photo'] would be your widget. –  Jason Smith Jul 30 '12 at 14:12
    
I am not using AHAH (just Drupal 7 form api) and is upload refresh All the form –  Ahmed Jul 30 '12 at 16:05
    
There is no way to do this that I am aware of that does not use AJAX/AHAH, sorry I couldn't be more help :/ –  Jason Smith Jul 31 '12 at 0:54
    
ok,thanks for that –  Ahmed Jul 31 '12 at 9:37
add comment

about dimension check this validation 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'),
  )
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.