Laravel - AJAX file upload returning null

Question

This is my ajax request:

var files = $('#imgur_attach')[0].files;

  if(files.length > 0){
    var fd = new FormData();
    
    // Append data 
    fd.append('file',files[0]);
    fd.append('_token',$globalToken);

    $.ajax({
        type: "POST",
        dataType: "json",
        contentType: false,
        processData: false,
        url: host + "/attach-comment-image/" ,
        data: {fd},

Controller:

public function attach(Request $request) {
    
    $this->validate($request, [
        'file' => 'image|required',
    ]);

When sending this ajax request, the validator tells me that the "file" field is required. Trying to return request->get('file') returns null.

However, when I do console.log(fd); before the ajax request, it returns the following:

Why is this happening? I don't normally upload files with AJAX over a regular POST request, so I don't understand what I'm missing.

In the console.log(fd) you already see, that file -> {}, so it isn't filled. In your fd.append('file',files[0]);, see if you get something from files[0], this is purely debugging. What is in var files, for example? — UnderDog
– UnderDog, Commented Dec 31, 2022 at 4:58
@UnderDog console.log(files); returns the following: FileList [ File ] 0: File { name: "Untitled.png", lastModified: 1672461379071, size: 17639, … } length: 1 — Felix
– Felix, Commented Dec 31, 2022 at 5:13
Using the network tab in dev tools for your browser: e.g: stackoverflow.com/questions/15603561/… — Ali Raza
– Ali Raza, Commented Dec 31, 2022 at 5:29

Ali Raza · Accepted Answer · 2022-12-31 05:46:28Z

1

Try stringify data before sending like this:

$.ajax({
  ...
  data: {fd: JSON.stringify(fd),
  ...

answered Dec 31, 2022 at 5:46

Ali Raza

9329 silver badges18 bronze badges

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

1 Comment

Felix Over a year ago

Doesn't work. Request payload is still just [object Object]. I also tried removing processData: false, since you're stringifying but that didn't work either.

ali sadegholvaad · Accepted Answer · 2022-12-31 06:04:27Z

1

you need to add multipart form data

contentType: "multipart/form-data",

answered Dec 31, 2022 at 6:04

ali sadegholvaad

703 bronze badges

1 Comment

Felix Over a year ago

Doesn't do anything.

Felix · Accepted Answer · 2022-12-31 23:22:38Z

0

Wrapping the input around with a form tag like this did the trick:

<form method="POST" enctype="multipart/form-data">

Not sure why setting contentType: "multipart/form-data" in the ajax request doesn't work, but this solution works so I'll just use this instead.

answered Dec 31, 2022 at 23:22

Felix

2,7916 gold badges44 silver badges88 bronze badges

Collectives™ on Stack Overflow

Laravel - AJAX file upload returning null

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related