I've been looking at the FAPI reference and didn't found the image upload widget control, there is only a #file and a #managed_file, I've been using the #managed_file, but i'de like the thumb preview functionality.

thanks!

Comments

cesarpo’s picture

No one ?

tomas.teicher’s picture

I am searching for the same solution, although in D6. I found some tutorials for d6, but all of them adivised to copy imagefield widget from some cck field. I don't think it is good solution. I don't want my form field to be depent on some cck field.

devoted.designer’s picture

I'm searching for that too!!!

Do you know how to populate the images' information in a table?! I would like to do something similar to the image upload form.

Any ideas?

lukus’s picture

I'm looking for the same .. will report back when I find a solution.

EDIT: Briefly, the solution I came up with (for Drupal 7) is as follows:

  1. Override the theme function for your image element
  2. eg. add something like this to your theme array...

    <?php
          $form[....]['IMAGE_ELEMENT']['#theme'] => 'YOUR_THEME_FUNCTION',
    ?>
    
  3. Register YOUR_THEME_FUNCTION using your module's HOOK_theme() function
  4. eg.

    <?php
    function YOUR_MODULE_theme() {
      return array(
        'YOUR_THEME_FUNCTION' => array(
           'render element' => 'form',
        ),
      );
    }
    ?>
    
  5. Create YOUR_THEME_FUNCTION, and alter the #markup for the file element
  6. eg.

    <?php
    function YOUR_THEME_FUNCTION($variables) {
      
      $form = $variables['form'];
    
      $form['filename']['#markup']=theme('image_style', array('style_name' => 'thumbnail', 'path' => file_build_uri(file_uri_target($form['#file']->uri)))).$form['filename']['#markup'];
    
      $output = drupal_render_children($form);
      
      return $output;
    }
    ?>
    
djg_tram’s picture

If all you need is to mimic the core style then, actually, there is no need to roll your own theme function. Set up the managed_file as this:

'#type' => 'managed_file',
  '#title' => ...,
  '#description' => ...,
  '#default_value' => $file ? $file->fid : NULL,
  '#theme' => 'image_widget',
  '#upload_location' => ...,
  '#attached' => array(
    'css' => array(
      'image-preview' => drupal_get_path('module', 'image') . '/image.css',
    ),
  ),
  'preview' => array(
    '#markup' => theme('image_style', array('style_name' => 'thumbnail', 'path' => $file->uri)),
  ),

You don't need the #attached item if you don't want the preview to appear floating to the left or you have included the necessary CSS into your own style already.

derMatze’s picture

That solution doesn't work for me...
Anyone who has a solution for this issue? It would be great if one could use the normale _multiple_ image upload within form api.

rolodmonkey’s picture

When you say it doesn't work for you, what do you mean? Do you get an error? Do you get something, but not what you expected? Can you provide examples of your code, or screenshots?

--

Read more at iRolo.net

derMatze’s picture

I just get the normal one file upload form item, that I get when I don't use
'#theme' => 'image_widget'
for that item...
No errors, but there is no difference.

mozh92’s picture

I have work example

function MODULE_NAME_theme() {
    return array(
      'MODULE_NAME_image' => array(
        'render element' => 'form',
      ),
    );
}

function theme_MODULE_NAME_image($variables) {
    $form = $variables['form'];
    if(isset($form['#file']->uri))
        $form['identity_image']['#markup'] = theme('image_style', array('style_name' => 'thumbnail', 'path' => file_build_uri(file_uri_target($form['#file']->uri))));
    $output = drupal_render_children($form);
    return $output;
}

function MODULE_NAME_form($form, &$form_state) {
    $form = array();
        $form = array();
        $form['identity_image'] = array(
          '#title' => t('Upload photo document'),
          '#type' => 'managed_file',
          '#required' => true,
          '#upload_location' => 'public://identity/'.$order->uid.'/',
          '#upload_validators' => array(
            'file_validate_extensions' => array('jpg png jpeg'),
          ),
          '#theme' => 'MODULE_NAME_image',
        );
        $form['submit'] = array(
          '#type' => 'submit',
          '#value' => t('Approved'),
        );
return $form;
}
dks786’s picture

Hey Thanks Aleksey for your code, It works very well.

I am able to upload image and can see the image thumbnail.
But when I refresh that page, the image will gone,
What I need to do for display that image (when refresh the page, after upload) until i delete it.

mozh92’s picture

You can save image in hook_submit_form

function user_identity_form_submit($form, &$form_state) {
  global $user;
  global $base_url;
  //variable_set('identity_image', $form_state['values']['identity_image']);
  $file = file_load($form_state['values']['identity_image']);
  if($file){
    $file->status = FILE_STATUS_PERMANENT;
    file_save($file);
    file_usage_add($file, 'user_identity', 'user_identity', $file->uid);

    //create node identity
    $node = new stdClass();
    $node->type = 'user_identity';
    node_object_prepare($node);
    $node->title = 'Identity: '.$user->name;
    $node->field_photo_document['und'][] = (array)$file;
    $node->language = LANGUAGE_NONE;
    $node->uid = $user->uid;
    $node->status = 0;
    node_save($node);
...

im my example, I save image in node
change name 'user_identity' on own

dks786’s picture

I am using currently - return system_settings_form($form);
So do I need to use submit button code Instead of that?

Or If you know what to use with system_settings_form, than please guide me!

Thanks my dear :) I try this code.

mozh92’s picture

hello, I use simple - return $form; in hook_form. You can see my previuos comment with hook_form

dks786’s picture

I need to use system_settings_form only,
because we dont want nodes, we just want to save values in variables.

drupalastic’s picture

// in from builder function

$form['managed_file'] = array(
  '#process' => array('custom_managed_file_element_process'),
  '#title' => t('Managed file example'),
  '#type' => 'managed_file',
  '#upload_validators' => array('file_validate_extensions' => array('jpeg jpg png gif')),
  '#upload_location' => $path_uri,
  '#progress_indicator' => 'bar',
  '#progress_message' => 'One moment while we save your file...',
  '#theme' => 'image_widget',
  '#attached' => array(
    'css' => array(
      'image-preview' => drupal_get_path('module', 'image') . '/image.css',
    ),
  ),
);

// managed file elements process callback

function custom_managed_file_element_process($element, &$form_state, $form) {

  $element = file_managed_file_process($element, $form_state, $form);
  
  $element['#pre_render'][] = 'custom_managed_file_element_preview';
  
  return $element;
}

// elements pre render callback

function custom_managed_file_element_preview(array $element) {

  if (empty($element['#file'])) {
    hide($element['remove_button']);
  }
  else {

    $file = $element['#file'];
    hide($element['upload']);
    hide($element['upload_button']);

    if (!file_validate_is_image($file)) {
      $info = image_get_info($file->uri);
      $variables = [
        'alt' => $file->filename,
        'path' => $file->uri,
        'style_name' => 'thumbnail',
        'attributes' => [
          'class' => ['upload-preview'],
        ],
      ];

      if (is_array($info)) {
        $variables += $info;
      }

      // Add the additional alt and title fields.
      $element['alt'] = array(
        '#title' => t('Alternate text'),
        '#type' => 'textfield',
        '#default_value' => 'some alt text',
        '#description' => t('This text will be used by screen readers, search engines, or when the image cannot be loaded.'),
        // @see http://www.gawds.org/show.php?contentid=28
        '#maxlength' => 512,
        '#weight' => -148,

      );
      $element['title'] = array(
        '#type' => 'textfield',
        '#title' => t('Title'),
        '#default_value' => 'some title here',
        '#description' => t('The title is used as a tool tip when the user hovers the mouse over the image.'),
        '#maxlength' => 1024,
        '#weight' => -149,
      );

      $element['preview'] = [
        '#type' => 'markup',
        '#weight' => -150,
        '#markup' => theme('image_style', $variables),
      ];
    }
  }

  return $element;

}
jaypan’s picture

Nice. Our forum software is ancient and outdated, so I can't thumbs-up your post, but this is the next best thing.

Contact me to contract me for D7 -> D10/11 migrations.
Or anything really. I'm friendly, and open to work or conversation.

dks786’s picture

Our forum is great place for drupal discussion, sharing knowledge, gaining information, solving problem, exploring drupal...etc.

This is the great & vast network of drupal developers.

if this is outdated than where should we discuss, please suggest!

jaypan’s picture

The community is great - it's the actual forum software that sucks.

Here is ok, but you're more likely to find an answer on drupal.stackexchange.com, due to them having a modern software that properly handles programming style questions.

Contact me to contract me for D7 -> D10/11 migrations.
Or anything really. I'm friendly, and open to work or conversation.

mmjvb’s picture

dks786’s picture

Thanks mmjvb,

But in my opinion, rather than many groups, The one vast group is better. so on the same place we can meet with all experts.

that's why i was preferred the drupal.org group. (all people on same place to discuss, and not need to post/search on different-2 communities)

mmjvb’s picture

Anyway, you are not going to meat too many experts here. Which is why I pointed to slack, not saying not to use the forum!

Suggest to see the documentation on where to find the community, there are more places then are mentioned here.

dks786’s picture

@mmjvb bro, Thanks for suggesting more communities,

drupalastic’s picture

@Jaypan, Glad to know that you liked it :) & thanks for the positive feedback.. My Salutes to your contributions in Drupal :).... I wish i can also contribute back to the community, at-least a small percentage of what you have done... 

jenna.tollerson’s picture

This was _very_ helpful for me, thank you. This page kept coming up first in my googling so I thought I would share the solution I'm using with Drupal 9 here: https://gist.github.com/jennatollerson/fcd5177476b6c7ab92ca1e3c1140be9c

I hope this helps someone. :)