I created one simple form with a file component. On user interface , the user browses a file and click on "Upload" button. The file has been uploaded successfully.
But on other hand, the user browses a file and click directly on the form "Submit" button, then file upload is not working. Let me know whhat is the solution for this issue?
Thanks in advance..

Comments

David Stosik’s picture

Status: Active » Closed (duplicate)

Hi,

Thanks for the bug report. Sadly, this is a bug I already spotted, which is due to a bug or limitation in Drupal core.
Please see this issue for more details: #1513200: managed_file form component not submitted on AJAX submit.

Regards,

David

monymirza’s picture

Issue summary: View changes

Looks like i have found the solution. let me create a patch.

seanB’s picture

A workaround could be creating a JS file in a custom module to overwrite the function that messes this up.

Add a form alter to add a class to your submit button and add the js file:

/**  
 * Implements hook_form_FORM_ID_alter().  
 *  
 * Fix file uploads in ajax webforms.  
 */  
function custom_module_form_webform_client_form_alter(&$form, $form_state, $form_id) {  
  $webform = $form['#node']->webform;  
  if ($webform['webform_ajax'] != WEBFORM_AJAX_NO_AJAX) {  
    foreach (array('previous', 'next', 'submit', 'draft') as $button) {  
      if (isset($form['actions'][$button])) {  
        // Add webform-ajax-submit class and javascript to fix file uploads.  
        drupal_add_js(drupal_get_path('module', 'custom_module') . '/js/webform_ajax_file.js', array('type' => 'file', 'group' => JS_THEME));  
        $form['actions'][$button]['#attributes']['class'][] = 'webform-ajax-submit';  
      }  
    }  
  }  
}

And add your modules js file to overwrite the core js function.

(function ($) {  
  
  // Overwrite Drupal.file.disableFields from file module to  
  // allow file fields being submitted when submitting through  
  // ajax.  
  Drupal.file.disableFields = function (event){  
    var clickedButton = this;  
  
    // Do not disable fields for non-ajax buttons and the  
    // webform ajax submit button.  
    if (!$(clickedButton).hasClass('ajax-processed') || $(clickedButton).hasClass('webform-ajax-submit')) {  
      return;  
    }  
  
    // Check if we're working with an "Upload" button.  
    var $enabledFields = [];  
    if ($(this).closest('div.form-managed-file').length > 0) {  
      $enabledFields = $(this).closest('div.form-managed-file').find('input.form-file');  
    }  
  
    // Temporarily disable upload fields other than the one we're currently  
    // working with. Filter out fields that are already disabled so that they  
    // do not get enabled when we re-enable these fields at the end of behavior  
    // processing. Re-enable in a setTimeout set to a relatively short amount  
    // of time (1 second). All the other mousedown handlers (like Drupal's Ajax  
    // behaviors) are excuted before any timeout functions are called, so we  
    // don't have to worry about the fields being re-enabled too soon.  
    // @todo If the previous sentence is true, why not set the timeout to 0?  
    var $fieldsToTemporarilyDisable = $('div.form-managed-file input.form-file').not($enabledFields).not(':disabled');  
    $fieldsToTemporarilyDisable.attr('disabled', 'disabled');  
    setTimeout(function (){  
      $fieldsToTemporarilyDisable.attr('disabled', false);  
    }, 1000);  
  }  
  
}(jQuery));  
rafaelferreir4’s picture

Solution #3 worked for me! Thanks!

anou’s picture

#3 still work today! Thx seanB ;-)