Custom Form to Upload User Picture Drupal 7

Past cesarpo on 27 Jan 2011 at 04:08 UTC

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

thanks!

Comments

I am searching for the same

I am searching for the aforementioned solution, although in D6. I found some tutorials for d6, just 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 class field to be depent on some cck field.

Need it too!!!

I'm searching for that as well!!!

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

Any ideas?

lukus's picture

I'one thousand looking for the aforementioned ..

lukus

commented 14 September 2011 at 12:00

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

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

Override the theme office for your epitome chemical element

eg. add something like this to your theme array...

                    <?php       $course[....]['IMAGE_ELEMENT']['#theme'] => 'YOUR_THEME_FUNCTION', ?>

Annals YOUR_THEME_FUNCTION using your module's HOOK_theme() function

eg.

                    <?php role YOUR_MODULE_theme() {   return array(     'YOUR_THEME_FUNCTION' => array(        'return element' => 'course',     ),   ); } ?>

Create YOUR_THEME_FUNCTION, and change the #markup for the file element

eg.

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

djg_tram's picture

If all you lot demand is to mimic

djg_tram commented xx October 2013 at 09:29

If all y'all need is to mimic the cadre style then, actually, there is no need to roll your own theme part. Fix the managed_file as this:

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

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

That solution doesn't piece of work

derMatze commented half-dozen May 2014 at 12:56

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

RoloDMonkey's picture

When you lot say it doesn't work

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

I but get the normal one

derMatze commented 6 May 2014 at 19:53

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

mozh92's picture

I have work example

mozh92 commented xv July 2016 at 07:59

I have work instance

                function MODULE_NAME_theme() {     render array(       'MODULE_NAME_image' => array(         'render chemical element' => 'form',       ),     ); }  role theme_MODULE_NAME_image($variables) {     $grade = $variables['course'];     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($course);     return $output; }  function MODULE_NAME_form($form, &$form_state) {     $grade = assortment();         $form = assortment();         $course['identity_image'] = array(           '#title' => t('Upload photo document'),           '#type' => 'managed_file',           '#required' => true,           '#upload_location' => 'public://identity/'.$lodge->uid.'/',           '#upload_validators' => array(             'file_validate_extensions' => array('jpg png jpeg'),           ),           '#theme' => 'MODULE_NAME_image',         );         $form['submit'] = assortment(           '#type' => 'submit',           '#value' => t('Canonical'),         ); return $form; }

It works, Thanks a lot!

dks786 commented 17 Nov 2016 at 13:05

Hey Thank you Aleksey for your code, Information technology works very well.

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

mozh92's picture

You tin salve image in hook

mozh92 commented 17 Nov 2016 at fourteen:11

You tin salve image in hook_submit_form

                    role 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->proper noun;     $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 epitome in node
change name 'user_identity' on own

Thank you a lot again!

dks786 commented 17 November 2016 at 15:02

I am using currently - render system_settings_form($class);
And so exercise I need to use submit button lawmaking Instead of that?

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

Thanks my love :) I attempt this code.

drupalastic's picture

Following code works for me, promise it helps someone

drupalastic commented 5 February 2018 at 15:20

// in from builder function

                $course['managed_file'] = array(   '#process' => assortment('custom_managed_file_element_process'),   '#title' => t('Managed file instance'),   '#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 salvage your file...',   '#theme' => 'image_widget',   '#fastened' => assortment(     'css' => array(       'image-preview' => drupal_get_path('module', 'epitome') . '/image.css',     ),   ), );

// managed file elements process callback

                role custom_managed_file_element_process($element, &$form_state, $form) {    $element = file_managed_file_process($element, $form_state, $class);      $chemical element['#pre_render'][] = 'custom_managed_file_element_preview';      return $element; }

// elements pre render callback

                office custom_managed_file_element_preview(array $element) {    if (empty($element['#file'])) {     hide($chemical element['remove_button']);   }   else {      $file = $element['#file'];     hide($element['upload']);     hibernate($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'] = assortment(         '#title' => t('Alternating text'),         '#type' => 'textfield',         '#default_value' => 'some alt text',         '#description' => t('This text will be used by screen readers, search engines, or when the prototype cannot be loaded.'),         // @see http://world wide web.gawds.org/prove.php?contentid=28         '#maxlength' => 512,         '#weight' => -148,        );       $element['championship'] = assortment(         '#blazon' => 'textfield',         '#title' => t('Championship'),         '#default_value' => 'some title here',         '#clarification' => 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 $chemical element;  }

Our forum is swell identify for

dks786 commented 6 Feb 2018 at 08:54

Our forum is not bad identify for drupal discussion, sharing knowledge, gaining data, solving trouble, exploring drupal...etc.

This is the great & vast network of drupal developers.

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

Jaypan's picture

The community is great - it's

Jaypan commented six February 2018 at 08:59

The customs is great - it's the bodily forum software that sucks.

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

Thank you mmjvb,

dks786 commented 6 Feb 2018 at fourteen:29

Thanks mmjvb,

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

that'due south why i was preferred the drupal.org grouping. (all people on same identify to hash out, and not need to post/search on unlike-2 communities)

mmjvb's picture

Not sure what you are talking about, sounds off topic!

mmjvb commented 7 Feb 2018 at 01:46

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

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

drupalastic's picture

Thanks for the feedback

drupalastic commented 6 February 2018 at 15:06

@Jaypan, Glad to know that y'all liked it :) & thanks for the positive feedback.. My Salutes to your contributions in Drupal :).... I wish i can too contribute back to the customs, at-to the lowest degree a small percentage of what y'all take done...

harvardbeem1967.blogspot.com

Source: https://www.drupal.org/forum/support/module-development-and-code-questions/2011-01-27/how-to-use-image-upload-widget-in-a