Laravel 5.0 trying to save file and store filepath to db

Question

I am trying to save an image and store it's location to the database but for some reason I always get null when I dump the request from my controller. Not sure what I am doing wrong.

My form:

<form class="addorUpdateBlockItem" method="post" enctype="multipart/form-data">
    <div class="input-group item">
        <label for="content">label</label>
        <input type="text" hidden name="item_type" value="image">
        <input type="file" name="content" id="contentImageBlockId3" class="form-control">
        <span class="input-group-btn">
            <button type="submit" class="btn btn-default plus margin-top">opslaan</button>
        </span>
    </div>
</form>

Now in my controller I try to access the image in my request like this:

dd($request->input('content'));

This results in null

My controller method where I do the dump

/**
 * Add or Update a BlockItemContent to a BlockNewsletter item.
 *
 * @param $blockNewsletterPivotId
 * @param Request $request
 * @return \Symfony\Component\HttpFoundation\Response
 */
public function addOrUpdateBlockItemContent($blockNewsletterPivotId, Request $request)
{
    if ($request->input('item_type') == "image") {
        dd($request->hasFile('content'));
    }
}

this results in false

EDIT

I forgot everything happens through an ajax call maybe it has something to do with it:

$(document).on('submit', '.addorUpdateBlockItem', function (e) {
        e.preventDefault();

        // Retrieve form data
        let formData = new FormData();

        let data = $(this).serializeArray();
        $.each(data, function(index, field) {
            formData.set(field.name, field.value);
        });

        $.ajax({
            url: $(this).attr('action'),
            data: formData,
            processData: false,
            contentType: false,
            type: 'POST',
            success: function(data){
                if (data.data.actionType === 'update') {
                    $('.successMessage').html(data.data.item + ' succesvol bijgewerkt.');
                }

                if (data.data.actionType === 'insert') {
                    $('.successMessage').html(data.data.item + ' succesvol toegevoegd.');
                }

                $('.successMessage').show();
            },
            error: function(error) {
                console.log(error);
            }
        });
    });

Answer 1

Replace your formdata section here:

let formData = new FormData();

let data = $(this).serializeArray();
$.each(data, function(index, field) {
    formData.set(field.name, field.value);
});

With this:

let formData = new FormData($(this)[0]);

Answer 2

You can access the file with $request->file('content') .

Check also $request->hasFile('content') , it should return you true .

Answer 3

you did this line :

$.ajax({
        url: $(this).attr('action'),..

but in your form you did not specified any action:

<form class="addorUpdateBlockItem" method="post" enctype="multipart/form-data">

so try to do this and let me see your dd result:

<form class="addorUpdateBlockItem" action="{{ route('your_upload_route') }}" method="post" enctype="multipart/form-data">