Laravel AJAX xhr File Not Uploading

Question

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

You need to post a `multipart/form-data` request body. Try `var frmData = new FormData($('#customerForm')[0])` — Phil, Jun 09 '20 at 22:39
Does this answer your question? [Sending multipart/formdata with jQuery.ajax](https://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax) — Phil, Jun 09 '20 at 22:40
Does this answer your question? [How can I upload files asynchronously?](https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously) — Daedalus, Jun 09 '20 at 22:40
`$.ajax({ url: 'php/upload.php', data: $('#file').attr('files'), cache: false, contentType: 'multipart/form-data', processData: false, type: 'POST', success: function(data){ alert(data); } });` When i use this type of code my ajax did not work — Ra Zi, Jun 09 '20 at 22:45

score 0 · Answer 1 · answered Jun 10 '20 at 06:02

0

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

        }
    });
});

answered Jun 10 '20 at 06:02

Khalid Khan

3,017
1
11
27

`var data = new FormData($('#customerForm')[0]);` When i print **data** variable in console it show empty – Ra Zi Jun 10 '20 at 20:04
@RaZi It should not be empty, can you try again ? and please let me know the scenario when you are facing this problem – Khalid Khan Jun 11 '20 at 04:50
I've tried it again it return empty array of FormData – Ra Zi Jun 11 '20 at 09:13
`let data = new FormData(); // let TotalImages = $('#customFile')[0].files.length; //Total Images var image = $('#customFile')[0]; console.log(image); data.append('image', image); data.append('data',$('#customerForm').serialize());` **Now this data is send into laravel controller $request->input() returns** _{"image":"[object HTMLInputElement]","data":"prefix=CSH_&id=1001&salutation=Mr&name=Ra%20Zi&email=xxxx%40gmail.com&country=1&phone=03337896029&phone_2=&dob=&sex=Male&isSupplier=0&address=Gujrat%2C%20Pakistan"}_ – Ra Zi Jun 11 '20 at 11:21
@RaZi remove enctype attributes from form and then try to console.log the FormData – Khalid Khan Jun 11 '20 at 12:00

score 0 · Accepted Answer · answered Jun 12 '20 at 09:18

$('#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

Laravel AJAX xhr File Not Uploading

2 Answers2