Problem uploading images to Laravel 6 with Ajax

Question

Currently I did a mini file upload project using the Asynchronous File Uploader (Ajax) and it worked. I went to try to upload images using ajax and my request is returning null, so I can not manipulate the database.

I already looked for some solutions in the forum and none solved, I saw that many were the enctype problem of the form, but I believe that mine is not.

Route:

Route::get('/', 'PostControlador@index');
Route::get('/arquivos-json', 'PostControlador@index');
Route::post('/', 'PostControlador@store');

View:

        <form method="POST" enctype="multipart/form-data">
            <input type="file" name="arquivo" id="arquivo">
            <button type="button" class="btn btn-primary btn-save-post">Enviar</button>
        </form>

Javascript:

        $('.btn-save-post').on('click', function(){

            let formData = new FormData();
            formData.append('arquivo', $('#arquivo').val());

            $.ajax({
                url: '{{ url('/') }}',
                method: 'post',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                processData: false,
                contentType: false,
                data: formData,
                success: function(response) {
                    console.log(response);
                },
                error: function(error) {
                    console.log(error);
                }
            });

        });

Controller:

public function store(Request $request)
{
        dd ( $request->all() ); 
        // result: ["arquivo" => "C:\fakepath\2028_2229862022_a2e8c5716f_320_240_nofilter.jpg"]


        dd ( $_FILES ); 
        // result: []


        dd ( $request->file('arquivo') ); 
        // result: null


        dd ( $request->arquivo ); 
        // result: "C:\fakepath\65535_48730933186_d4b4dd1979_320_240_nofilter.jpg"
}

As you might have seen in this code, the $request->all() and $request->file Normally return the file, the global $_FILES and the $request->file('file') return null.

Answer 1

You are passing the wrong amount on the formdata, the .val() in jQuery or .value in pure Javascript do not take the file, just take the name, so you are not uploading, you are sending the file path, the correct would be it:

formData.append('arquivo', $('#arquivo').get(0).files[0]);

This is because .get(0) takes the input and the .files[0] takes the first file (even if it is not a multiple upload, it works as Indice) so you add it directly in Formdata, then to upload you can use the Laravel functions themselves, such as the documentation example: https://laravel.com/docs/5.8/filesystem#file-uploads

public function store(Request $request)
{
    $path = $request->file('arquivo')->store('pasta_aonde_desejo_salvar');

    dd($path);
}