Laravel AJAX xhr File Not Uploading - Jquery ajax

Razi
June 10, 2020
225 views
0 votes
2 Answers

HTML File

    <form id="customerForm" role="form" enctype="multipart/form-data">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Customer ID</label>
                                <div class="input-group">
                              <div class="input-group-prepend">
                                <span class="input-group-text">
                                  CSH_
                                  <input type="hidden" name="prefix" value="CSH_">
                                </span>
                              </div>
                              <input type="text" class="form-control" name="id">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Customer Name</label>
                                <div class="input-group">
                              <div class="input-group-prepend">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="custSalutation">
                                    Mr
                                  </button>
                                  <div class="dropdown-menu">
                                    <a class="dropdown-item salutation">Mr</a>
                                    <a class="dropdown-item salutation">Mrs</a>
                                    <a class="dropdown-item salutation">Ms</a>
                                  </div>
                                  <input type="hidden" name="salutation" id="salutation" value="Mr">
                              </div>
                              <input type="text" class="form-control" name="name" placeholder="Customer Name">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Customer Email</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-envelope"></i>
                                        </span>
                                    </div>
                                    <input type="email" class="form-control" name="email" placeholder="Enter email">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Country</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-flag"></i>
                                        </span>
                                    </div>
                                    <select class="form-control select2" name="country">
                                        <option value="" selected>option 1</option>
                                        <option value="1">option 1</option>
                                        <option>option 2</option>
                                        <option>option 3</option>
                                        <option>option 4</option>
                                        <option>option 5</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Customer Phone</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-phone"></i>
                                        </span>
                                    </div>
                                    <input type="text" class="form-control" placeholder="Enter Phone Number" name="phone">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Alternate Phone</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-phone"></i>
                                        </span>
                                    </div>
                                    <input type="text" class="form-control" name="phone_2" placeholder="Enter Alternate Number">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Date Of Birth</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-calendar-alt"></i>
                                        </span>
                                    </div>
                                    <input type="date" class="form-control" name="dob">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="exampleInputEmail1">Sex</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fas fa-venus-mars"></i>
                                        </span>
                                    </div>
                                    <select class="form-control" name="sex">
                                        <option value="Male">Male</option>
                                        <option value="Female">Female</option>
                                        <option value="Other">Other</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="exampleInputEmail1">If Supplier</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                      <span class="input-group-text">
                                        <i class="fas fa-truck"></i>
                                      </span>
                                    </div>
                                    <select class="form-control" name="isSupplier">
                                      <option value="0" selected>No</option>
                                      <option value="1">Yes</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Address</label>
                                <textarea class="form-control" rows="4" placeholder="Enter ..." name="address"></textarea>
                            </div>
                        </div>
                        <div class="col-md-2"></div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="">Customer Image</label>
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" name="customer_image" id="customFile">
                                    <label class="custom-file-label" for="customFile">Choose file</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="text-right">
                        <button type="button" class="btn btn-danger" id="frmReset"><i class="fas fa-undo"></i> Reset</button>
                        <button type="submit" class="btn btn-success" id="submitData"><i class="fas fa-save"></i> Save</button>
                    </div>
                </div>
                </form>

Jquery

 $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        var frmData=$("#customerForm").serialize();
        $.post('{{URL::to("/createcustomer")}}',frmData,function(data,xhrStatus,xhr){
                if(data==1){
                    msg= "error";
                    title ="User ID Already Registered";
                    alertSuccess(msg,title);
                }
                else{
                    console.log(data);
                    msg= "success";
                    title ="Customer Added Successfully";
                    alertSuccess(msg,title);
                    formReset(formName);
                }
            });
        }

How i can upload a file using AJAX ? if i change anything in AJAX request form submit like this without AJAX

http://127.0.0.1:8000/addcustomer?prefix=CSH_&id=1001&salutation=Mr&name=Ra+Zi&email=cxxxxx%40gmail.com&country=1&phone=&phone_2=&dob=2010-01-27&sex=Male&isSupplier=0&address=xxxx%2C+Pakistan&customer_image=license.txt

Answers

Chosen as BEST ANSWER

$('#customerForm').on("submit",function(e){
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    e.preventDefault();
    var formData = new FormData(this);
    console.log(formData);
    $.ajax({
    url:'{{URL::to("/createcustomer")}}',
    method:"POST",
    data:formData,
    cache: false,
    contentType: false,
    processData: false,
    mimeType: 'multipart/form-data',
    beforeSend:function(){
        console.log('Before Working');
    },
    success:function(result){
        console.log(result);
        if(result==1){
            msg= "error";
            title ="User ID Already Registered";
            alertSuccess(msg,title);
        }
        else{
            msg= "success";
            title ="Customer Added Successfully";
            alertSuccess(msg,title);
            formName="#customerForm";
            formReset(formName);
        }
    }
})
});

This method works for me Thanks for your support

(Edit)

You can change your script into this to make it work

First, Declare the header on top of your script

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

And now use this below script, Just don’t forget to write your success scenario

$(document).on('click','#submitData',function(e){
    e.preventDefault();
    data = new FormData($('#customerForm')[0]);
    $.ajax({
        url:'/createcustomer',
        method:"POST",
        data:data,
        cache: false,
        contentType: false,
        processData: false,
        mimeType: 'multipart/form-data',
        success:function(result){
            // Write Your Success scenario code Here

        }
    });
});

Please signup or login to give your own answer.

Click here to cancel reply.

Laravel AJAX xhr File Not Uploading – Jquery ajax

Answers