How to upload file in laravel with formData in jquery ajax

Question

I am using laravel 5.4 and jquery Ajax to upload file and some form data.

I am using below code

function submitDocument(){
    var formData = new FormData(); // Currently empty
    var _token = $("#_token").val().trim();
    formData.append('title', $("#title").val());
    formData.append("doc",$("#doc")[0].files[0]);
    $.ajax({
      url: "documents",
      method: "post",
      data:{_token,formData},
    }).done(function(data) {

    });
    return false;// Not to submit page
}

And I am getting error

Uncaught TypeError: Illegal invocation

How can I fix this ? Thanks in advance for your time.

I am able to get value in formData by using

console.log(formData.get('title'));
console.log(formData.get('doc'));

Have you tried adding the _token value inside the formData object? — gbalduzzi
– gbalduzzi, Commented Nov 18, 2017 at 8:18
Seems like a duplicate: stackoverflow.com/questions/6974684/… — Don't Panic
– Don't Panic, Commented Nov 21, 2017 at 16:02

VinoCoder · Accepted Answer · 2017-11-18 09:32:19Z

3

+50

Try adding processData: false, contentType: false in your code

Replace your script with this:

function submitDocument(){
var formData = new FormData(); // Currently empty
var _token = $("#_token").val().trim();
formData.append('title', $("#title").val());
formData.append("doc",$("#doc")[0].files[0]);
$.ajax({
  url: "documents",
  method: "post",
  data:{_token,formData},
  cache : false,
  processData: false,
  contentType: false
}).done(function(data) {

});
return false;// Not to submit page
}

By default, data passed in to the data option as an object will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.

edited Nov 18, 2017 at 9:32

answered Nov 18, 2017 at 9:14

VinoCoder

1,1636 gold badges23 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Niklesh Raut Over a year ago

My code is not going to the controller , Because of using processData: false, I am getting "Token mismatch Error"

VinoCoder Over a year ago

Use this headers after contentType: false headers: { 'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') },

Niklesh Raut Over a year ago

I tried with this but not getting any value of title or doc

skytorner Over a year ago

maaaan you just saved my *ss

wolacinio · Accepted Answer · 2017-11-20 13:49:12Z

1

<script>
$(document).ready(function() {
    var url = "{{ url('/admin/file') }}"; 
    var options = { 
            type: 'post',
            url: url,       
            headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
            dataType: 'doc',
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                alert('Ok');
            },
            error: function (data) {
                alert('Error');
            }
    }; 
    $('#save').on('click', function() { 
        $("#form").ajaxSubmit(options); 
        return false; 
    }); 
}); 
</script>

answered Nov 20, 2017 at 13:49

wolacinio

1381 gold badge1 silver badge12 bronze badges

Comments

Deep Swaroop Sachan · Accepted Answer · 2017-11-20 13:37:56Z

0

Try this way

$(document).ready(function (){
$("#form").on('submit',(function(e){
        e.preventDefault();
        var formdata = new FormData(this);
        var _token = $("#_token").val().trim();
        formData.append('title', $("#title").val());
        formData.append("doc",$("#doc")[0].files[0]);
        $.ajax({
            url: "/site/url",
            type: "POST",
            data:{token:_token,formData},
            contentType: false,
            cache: false,
            processData:false,
            success: function(data){

            },
        });
    }));});

answered Nov 20, 2017 at 13:37

Deep Swaroop Sachan

1481 gold badge1 silver badge8 bronze badges

Collectives™ on Stack Overflow

How to upload file in laravel with formData in jquery ajax

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related