Submit form with text and images to Laravel Controller via Ajax

Question

Using Laravel 7 jQuery v3.4.1

I'm trying to send the content of a form via Ajax to a Laravel Controller. The form contains a text field and a file field . I wanted to find a way to send both types of fields in one request.

It looks like the content gets send but Laravel can't read it and returns an error.

My Ajax Code

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

    
    
$.ajax({
            url: form.attr('action'),
            data: formData,
            cache: false,
            method:'POST',
            contentType: false,
            processData: false,
            success: function (data) {

             console.log(data);
                
            },
            error: function (error,jqXHR, textStatus, errorThrown) {
                
                
              console.log(data.error);          
                
            }
        });

The Form

<form id="newProduct" action="{{route('Product.store',app()->getLocale())}}" method="POST" enctype="multipart/form-data">
        @csrf
        <input name="title" maxlength="10" length="10" placeholder="Product Title" type="text" id="title" class="form-control>
        <input type="file" name="files" id="files" class="files">
</form>

The Laravel function

public function store(Request $request)
{
        dd($request->input->all());
}

The Data gets send via ajax , but somehow Laravel can't access it all. I get the following error message from Laravel Call to a member function all() on null with a 500 Http Return code.

This is an extract from the http request send to Larval via ajax

-----------------------------23552347725043592001228805073 Content-Disposition: form-data; name="title" sdf

What has to be changed so Laravel can read the data ? Thanks in advance.

Yes it was $request->all() and it does have all the input fields in it :D . Problem solved. Thanks. — q55awr
– q55awr, Commented Aug 1, 2020 at 11:50

ChewySalmon · Accepted Answer · 2020-08-01 12:11:25Z

2

As per the comments, $request->input is not an attribute of the Illuminate\Http\Request class and so calling all() on it returns null, because it doesn't exist.

As you've discovered, all input can be retrieved with the all() helper function, $request->all().

Alternatively, input can be retrieved individually with input applied as a function $request->input('field') or $request->get('field'). Where $request->input() can also get nested entries $request->input('form.name'), something get() cannot do.

edited Aug 1, 2020 at 12:11

answered Aug 1, 2020 at 12:01

ChewySalmon

6348 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Submit form with text and images to Laravel Controller via Ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related