Preview image after uploading using Form API 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' =&gt; t('Logo'),
      '#type' =&gt; 'managed_file',
      '#required' =&gt; TRUE,
      '#default_value' =&gt; variable_get('logo', ''),
      '#upload_location' =&gt; 'public://',
      '#upload_validators' =&gt; array(
            'file_validate_extensions' =&gt; array('gif png jpg jpeg'),
            'file_validate_size' =&gt; array(0.3*1024*1024),
  )
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' =&gt; 'managed_file',
        '#title' =&gt; t('abc image'),
        '#upload_validators' =&gt; array(
            'file_validate_extensions' =&gt; array('gif png jpg jpeg'),
            'file_validate_size' =&gt; array(1 * 1024 * 1024),
        ),
        '#theme' =&gt; 'abc_thumb_upload',
        '#upload_location' =&gt; 'public://abc/'
    );


In your hook_theme(),

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


In your theme_abc_thumb_upload(),

function theme_abc_thumb_upload($variables) {

    $element = $variables['element'];

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

        return $output;
    }
}