1 year ago

#387253

test-img

EduardoK

Upload file with FilePond

I'm trying to make a file upload system following the tutorial found here: https://www.youtube.com/watch?v=GRXaCfS1qj0 I've followed the tutorial step by step, but i'm having troubles.. I'm getting this message in console:

filepond.js:4696 POST http://localhost:8080/upload 404 (Not Found)

The error is simple, but the thing is, i've followed the steps, so i don't actually know whats going on..

My web.php file has this:

<?php

    use Illuminate\Support\Facades\Route;

    Auth::routes();

    Route::post('upload', [UploadController::class, 'store']);

The upload controller is this:

<?php

    namespace App\Http\Controllers;

    use Illuminate\Http\Request;

    class UploadController extends Controller
    {
        public function store(Request $request){
            if ($request->hasFile('avatar')){
            $file = $request->file('avatar');
            $filename = $file->getClientOriginalName();
            $folder = uniqid() . '-' . now()->timestamp;
            $file->storeAs('avatars/tmp' . $folder, $filename);
        
            return $folder;
        }

        return '';
    }
}

And my blade file has this:

<input type="file" name="avatar" id="avatar">

@section('scripts')

<script>
    const inputElement = document.querySelector('input[id="avatar"]');
    const pond = FilePond.create(inputElement);
    FilePond.setOptions({
        server: {
            url: '/upload',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        } 
    })
</script>

@endsection

My question is: is the problem only the folders, or am i missing something ?

RESOLVED: If someone in the future struggles with this, the problem was in this script:

FilePond.setOptions({
    server: {
        url: 'upload',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    } 
})

Where i just had to remove the "/" in the "url: '/upload'".. In the video, he puts the "/", but for some reason, im my case, this was causing the problem.

laravel

upload

filepond

0 Answers

Your Answer

Accepted video resources