By Anonymous (not verified) on

Hi,

I'd like to call javascript functions when a managed_file field has been submitted or the image deleted. I found no solution on the web for now, does anyone have an idea ?

⋅ Categories: Drupal 7.x

Comments

Chandan Chaudhary’s picture

Chandan Chaudhary commented

can u elaborate your issue

Need Drupal help?
Reach me

Acquia Certified Developer

Backend Frontend and DevOps.

Anonymous’s picture

Anonymous (not verified) commented

Of course.

I am using managed_file in a module to upload an image without reloading the page. A managed_file field is very helpful in the upload part, however I still need to send the form to process the image by my module.

What I would like to do is to create a sort of event listener that would call a javascript function of my own when an image has been uploaded or removed of the managed_file field.

Chandan Chaudhary’s picture

Chandan Chaudhary commented

if u want to invoke a javascript on the click event of the manage_file button "upload and delete" you can write a jquery to do that
refer http://api.jquery.com/click/

or probably you can override the manage_file element and add onclick event to that element.
refer http://api.drupal.org/api/drupal/modules!file!file.module/function/theme...

you can override the manage_file element by writing a function in your template.php suppose you theme name is active you can override by 

function active_file_managed_file($variables)
{

}

Hope this will help u

Need Drupal help?
Reach me

Acquia Certified Developer

Backend Frontend and DevOps.

Anonymous’s picture

Anonymous (not verified) commented

Those two solutions won't work and that for the same reason : I need the file to be uploaded before to call my javascript function. So I need drupal to upload the file (which it does just fine) and then call my function.

I tried to add an event listener to a hidden input that contains the image's fid but all the container is rebuilt after uploading a file therefore the event listener cannot work.

djg_tram’s picture

djg_tram commented

Add a callback (or several of them) to the #file_value_callbacks field of the managed_file. I couldn't find it documented properly but it is commented in core's file.module file.

Anonymous’s picture

Anonymous (not verified) commented

Nobody ?

geddy’s picture

geddy commented

I've been trying to get the same thing working.

Google 'drupal managed_file events' and this is result #4. If anyone's come up with a way to do this, please share!

Basically, after a file is uploaded (in my case, an mp3 file), I have a separate library that is reading the ID3 tags into other fields on a custom attribute. Basically, after an upload, I'm trying to get the following to happen:

1) Show the rest of the fields (in my case, stuff like Artist, Album, Track, etc).
2) Have them prepopulated.

There has to be some kind of event (or some way to hook an event on upload_complete or something of that nature), that will fire upon a successful upload; client or server-side.

Thanks guys.

cubeinspire’s picture

cubeinspire commented

I have the same problem...

<form accept-charset="UTF-8" id="qrcode-ajax3-form" method="post" action="/en" enctype="multipart/form-data">
   <div>
      <div id="edit-ajax3-ajax-wrapper">
         <div class="form-item form-type-managed-file form-item-ajax3">
            <label for="edit-ajax3">Upload image </label>
            <div class="form-managed-file" id="edit-ajax3">
               <input type="file" class="form-file" size="22" name="files[ajax3]" id="edit-ajax3-upload">
               <input type="submit" class="form-submit ajax-processed" value="Upload" name="ajax3_upload_button" id="edit-ajax3-upload-button">
               <input type="hidden" value="0" name="ajax3[fid]">
            </div>
          <div class="description">Images must be one of jpg, bmp, gif or png formats.</div>
      </div>
</div>
<input type="hidden" value="form-lplW_Owx6aSzodZ8SrDUzhI5SixgYzIWlKMZ4vzdNyA" name="form_build_id">
<input type="hidden" value="PlCoh4G-FLoKCJ-C0lFDC_JzmXA6TzVkmO6i53Bu_x18" name="form_token">
<input type="hidden" value="qrcode_ajax3_form" name="form_id">
</div>
</form>

Once the input submit #edit-ajax3-upload-button is clicked all the divs including it parent from #edit-ajax3-ajax-wrapper are rebuild...There is nothing on the API allowing a custom javascript function to act as callback.. very anoying situation.

Please if someone has a solution to this tell us !

Anonymous’s picture

Anonymous (not verified) commented

What I finally did is to check whether the ajax process is done or not every second for fifteen seconds. It is a simple timeout loop, not perfect but it worked so far.

jaypan’s picture

jaypan
Location Victoria, BC
commented

I wrote a tutorial on how to call a function after an AJAX event:
http://www.jaypan.com/tutorial/calling-function-after-ahah-event-drupal-...

Contact me to contract me for D7 -> D10/11 migrations.

andriy’s picture

andriy commented

Form API:

  $element_info = element_info('managed_file');
  $form['invoice_image_fid'] = array(
    '#title' => t('Image'),
    '#type' => 'managed_file',
    '#description' => t('Your description goes here.<br /> Allowed extensions are: <em>gif, png, jpg, jpeg.</em>'),
    '#default_value' => variable_get('invoice_image_fid', ''),
    '#upload_validators' => array('file_validate_extensions' => array('gif png jpg jpeg')),
    '#upload_location' => 'public://YOUR_PUBLIC_LOCATION/',
    // this will help to add onRemove event
    '#file_value_callbacks' => array('invoice_image_ahah_remove'),
    // this will help to add onAdd event
    '#process' => array_merge($element_info['#process'], array('file_field_custom_process')),
  );

Helper functions:

function file_field_custom_process($element, &$form_state, $form) {
  if (isset($element['filename'])) {
    // add JS only on ajax remove
    // to get to current window, use 'parent.' (like 'parent.jQuery(".body").addClass("mf_added")')
    $js = arg(0) == 'file' && arg(1) == 'ajax' ? '<script>alert("added");</script>' : '';
    // here I also modify markup, displayed at the left of the button
    $element['filename']['#markup'] = $js . theme('image', array('path' => $element['#file']->uri));
  }
  return $element;
}

function invoice_image_ahah_remove($element, $input, $form_state) {
  if (empty($input)) {
    // add JS on ajax file add
    // in my case it also modifies current page, accessing it through 'parent.'  
    print '<script>parent.jQuery("#invoice_intro_image").slideUp("slow");alert("removed");</script>';
  }
}

any JS code / JS function triggers may be added in these 2 functions

Max_Headroom’s picture

Max_Headroom commented

I couldn't get #file_value_callbacks to work for me (the way I needed it).
#file_value_callbacks does not seem to include the file object. In my user case, I needed to parse data from a csv file as soon as it is uploaded.

I found using #upload_validators as a callback to be much better, as it includes the file object as well as you can pass your own arguments:

 $validators = array(
      'file_validate_extensions' => array('csv'),
      'MY_MODULE_callback' => array($MY_ARGS), // array key is the callback function with value as an array of arguments to pass. file object is automatically added as first argument.
  );

  $form['MY UPLOAD'] = array(
      '#title' => 'File upload',
      '#type' => 'managed_file',
      '#upload_validators' => $validators,
  );
//etc...


function MY_MODULE_callback($file, $MY_ARGS) {
  //do your magic here....
  return array(); //return empty array if there is no error.
}

Quentin Campbell

aks_richa’s picture

aks_richa commented

I want to call confirm message before remove the file .

in my custom module i have used managed_file and in my module i want to add confirm message on remove button id we click on remove button there should be one popup with confirmation. if user click on ok then and then file should be deleted if they select cancel file should not be deleted...

i have search in web but dent get any solutions,