Drupal preview image with remove option after upload file using form API

Preview image with remove option after upload file using form API.

// Create form with '#type' => 'managed_file'.

     
function kali_custom_form($form, &$form_state) {
 $form['upload'] = array(
  '#type' => 'managed_file',
  '#title' => t('Image Preview'),
  '#upload_location' => 'public://',
  '#theme' => 'kali_preview_theme', // define theme for preview
  '#progress_indicator' => 'throbber',
  '#upload_validators' => array(
  'file_validate_is_image' => array(),
 'file_validate_extensions' => array('jpg jpeg gif png'),
 ),
);
}

// Write hook_theme() as mentioned below.

     
function hook_theme() {
  return array(
   'kali_preview_theme' => array(
   'render element' => 'element',
   'file' => 'kali.inc', // you can write code in separate file.
  )
 );
}

// Include below function as mentioned in kali.inc file or remove file include in hook_theme
and write below function in module file.

     
function theme_kali_preview_theme($variables) {
 $element = $variables['element'];
 $output = '';
 if($element['fid']['#value'] != 0 ) {
  $output .= '
';
  $output .= theme('image_style', array('style_name' => 'thumbnail', 'path' => file_load($element['fid']['#value'])->uri, 'getsize' => FALSE));
  $output .= drupal_render_children($element);
  $output .= '
';
 }
 return $output;
}

Some useful references:
-- Preview image after upload usinf FAPI.
-- Display uploaded image after upload.