Is there a way to capture the file upload event/response?

by cwiggo   Last Updated November 11, 2017 09:07 AM

I have a modal, within this modal I have a contact form with a the following fields (name, email, file upload) all of which are set to required.

I have attached the form validation library that actively validates the form.

The problem is drupal 8. When the user selects a file, the markup/state of the file changes. Which destroys my active request to validate the input. So if the user decides to remove the uploaded file, my formValidation code no longer works.

Is there a way to capture the file upload event/response?

Is there a way to make the form validation work in arms with Drupal 8 form state change with the AJAX API?

Here is a snippet of my form validation code:

  Drupal.behaviors.form_validation = {

    attach: function (context, settings) {

      $(document).ready(function() {
        var form = $('#contact-message-form');
        if(form.length){
           form.formValidation({
              framework: 'bootstrap',
              icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
              },
              fields: {
                'field_name[0][value]': {
                  validators: {
                    notEmpty: {
                        message: 'A name is required'
                    }
                  }
                },
                'files[field_file_upload_0]': {
                  validators: {
                    notEmpty: {
                        message: 'Please choose a file'
                    },
                    file: {
                        extension: 'pdf,doc',
                        type: 'application/pdf',
                        maxSize: 4194304,
                        message: 'The selected file is not valid'
                    }
                  }
                },
              }
          });
        }
      });

    }};

Here is an insight to the markup prior and after the file upload:

Before:

<div class="field--type-file field--name-field-file field--widget-file-generic form-group js-form-wrapper form-wrapper" data-drupal-selector="edit-field-file-wrapper" id="edit-field-file-wrapper">
  <div id="ajax-wrapper" class="form-group">
    <div class="form-item js-form-item form-type-managed-file js-form-type-managed-file form-item-field-file-0 js-form-item-field-file-0 form-group">
      <label for="edit-field-file-0-upload" class="control-label js-form-required form-required">Cover Letter</label>
      <div id="edit-field-etrigueForm3-0-upload" class="js-form-managed-file form-managed-file">
        <div id="ajax-wrapper" class="form-group has-feedback has-error">
          <input data-drupal-selector="edit-field-file-0-upload" class="js-form-file form-file form-control" type="file" id="edit-field-file-0-upload" name="files[field_file_0]" size="22" value="" data-fv-field="files[field_file_0]"><i class="form-control-feedback glyphicon glyphicon-remove" data-fv-icon-for="files[field_file_0]" style=""></i>
          <button class="js-hide button js-form-submit form-submit btn-default btn icon-before" data-drupal-selector="edit-field-file-0-upload-button" formnovalidate="formnovalidate" type="submit" id="edit-field-file-0-upload-button" name="field_file_0_upload_button" value="Upload"><span class="icon glyphicon glyphicon-upload" aria-hidden="true"></span>Upload</button>
          <input data-drupal-selector="edit-field-file-0-fids" type="hidden" name="field_file[0][fids]" id="edit-field-file-0-fids">
          <input data-drupal-selector="edit-field-file-0-display" type="hidden" name="field_file[0][display]" value="1" id="edit-field-file-0-display">
          <small class="help-block" data-fv-validator="notEmpty" data-fv-for="files[field_file_0]" data-fv-result="INVALID" style="">Please select a file</small><small class="help-block" data-fv-validator="file" data-fv-for="files[field_file_0]" data-fv-result="VALID" style="display: none;">The selected file is not valid</small>
        </div>
      </div>
      <div id="edit-field-file-0-upload--description" class="description help-block">One file only.<br>4 MB limit.<br>Allowed types: <code>doc, pdf</code>.
      </div>
    </div>
  </div>
</div>

After:

<div class="field--type-file field--name-field-file field--widget-file-generic form-group js-form-wrapper form-wrapper" data-drupal-selector="edit-field-file-wrapper" id="edit-field-file-wrapper">
  <div style="display: block;">
    <div id="ajax-wrapper--HZA2bPiEjOA" class="form-group">
      <div class="form-item js-form-item form-type-managed-file js-form-type-managed-file form-item-field-file-0 js-form-item-field-file-0 form-group">
        <label for="edit-field-file-0-upload--tc5iUT2kI6k" class="control-label js-form-required form-required">Cover Letter</label>
        <div id="edit-field-file-0-upload--tc5iUT2kI6k" class="js-form-managed-file form-managed-file">
          <div id="ajax-wrapper--HZA2bPiEjOA" class="form-group">
            <input data-drupal-selector="edit-field-file-0-fids" type="hidden" name="field_file[0][fids]" value="4283" id="edit-field-file-0-fids--26V5WU1Izz4">
            <span data-drupal-selector="edit-field-file-0-file-4283-filename" class="file file--mime-application-pdf file--application-pdf icon-before"><span class="file-icon"><span class="icon glyphicon glyphicon-file text-primary" aria-hidden="true"></span></span><span class="file-link"><a href="http://dev.impact.com/sites/default/files/2016-11/drush-cheat-sheet.pdf" type="application/pdf; length=56794" title="" target="_blank" data-toggle="tooltip" data-placement="bottom" data-original-title="Open file in new window">drush-cheat-sheet.pdf</a></span><span class="file-size">55.46 KB</span></span>
            <input data-drupal-selector="edit-field-file-0-display" type="hidden" name="field_file[0][display]" value="1" id="edit-field-file-0-display--zwezZcGMCLs">
            <button data-drupal-selector="edit-field-file-0-remove-button" formnovalidate="formnovalidate" class="button js-form-submit form-submit btn-danger btn icon-before" type="submit" id="edit-field-file-0-remove-button--TP_abHrI9lc" name="field_file_0_remove_button" value="Remove"><span class="icon glyphicon glyphicon-trash" aria-hidden="true"></span>Remove</button>
          </div>
          <span class="ajax-new-content" style="display: inline;"></span>
        </div>
      </div>
    </div>
    <span class="ajax-new-content" style="display: inline;"></span>
  </div>
</div>

Thanks in advance.

Tags : forms 8 ajax files


Related Questions




Check managed file in form using a JS function

Updated June 12, 2017 10:07 AM