posabsolute / jQuery-Validation-Engine

jQuery form validation plugin
http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
2.57k stars 1.2k forks source link

is there a way to upload a file on the form ajax call ? #973

Closed Mina-R-Meshriky closed 5 years ago

Mina-R-Meshriky commented 5 years ago

I'm submitting a Question


[ ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[x] Question

Current behavior

I am trying to 'upload a file' with the form on the "onAjaxFormComplete" method, but it appears that it can't be read on the server side $_FILES['passport_photo'] = null is there a way to send the file to process some validations on it before actually storing it to the system.

$(document).ready(function () {
        $("#registration_form").validationEngine('attach', {
            ajaxFormValidation: true,
            ajaxFormValidationURL: $("#registration_form").data('url'),
            ajaxFormValidationMethod: 'Post',
            onAjaxFormComplete: function(status, form, errors, options){
                if(status){
                    //
                }
            },
        });
    });
<form id="registration_form" enctype="multipart/form-data" data-url="register-profile-documents">
            <div class="col-md-6 mb-4">
                Passport/ID Scan* <span style="color: #DB9B15"> (Maximum Size 4MB)</span>
                <div class="profi_drag_box">
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" accept="application/pdf,image/jpeg" id="passport_photo" name="passport_photo">
                        <label class="custom-file-label" for="passport_photo">Choose file</label>
                    </div>
                    Please upload a full clear colored scan of your Passport/ID.<br>Supported formats: jpg, jpeg, pdf
                </div>
            </div>
</from>
emulsion-io commented 5 years ago

The input file is not transmit whit other fields, I have a same problem...

dennybrandes commented 5 years ago

I will check :-)

emulsion-io commented 5 years ago
//var data = form.serialize(); //==> comment this
var data = new FormData($(form).get(0)); //==> add this
var type = (options.ajaxFormValidationMethod) ? options.ajaxFormValidationMethod : "GET";
var url = (options.ajaxFormValidationURL) ? options.ajaxFormValidationURL : form.attr("action");
var dataType = (options.dataType) ? options.dataType : "json";
$.ajax({
    type: type,
    url: url,
    cache: false,
    dataType: dataType,
    data: data,
    form: form,
    methods: methods,
    options: options,
    processData: false,  //==> add this
    contentType: false,   //==> add this
    [...]
});

I find a solution, I replace the serialized who not recognize the file input by the FormData. and Voila !

dennybrandes commented 5 years ago

Great :+1: