Unprocessable Entity: 422 while uploading file Asynchronously using filepond in Laravel

maqsudinamdar commented 3 years ago

I'm using filepond to upload my files to the server using Laravel filepond Backend package.

However, while uploading files using Filepond Asynchronously using XMLHttpRequest. I noticed the following error pops up in the console.

Getting 422 (unprocessable entity) Error in console.

File: Sopamo\LaravelFilepond\Http\Controllers\FilepondController.php

    public function upload(Request $request)
    {
        $input = $request->file(config('filepond.input_name')); // $input = null

Below is the value getting from debugging the $request parameter in the upload method.

$request->files->parameters["filepond"]->test: false
$request->files->parameters["filepond"]->originalName: "originalFileName.pdf" //this is filename
$request->files->parameters["filepond"]->mimeType: "application/pdf"
$request->files->parameters["filepond"]->error: 0
$request->files->parameters["filepond"]->*SplFileInfo*pathName: "C:\xampp\tmp\php16E1.tmp"
$request->files->parameters["filepond"]->*SplFileInfo*fileName: "php16E1.tmp"

My config\filepond.php is the same as Sopamo/Laravel Package config file.

Below is my configuration:

FilePond.registerPlugin(
    FilePondPluginFileEncode
);

FilePond.create(document.querySelector('input[type="file"]'));

FilePond.setOptions({
    server: {
        url: '/filepond/api',
        process: '/process',
        revert: '/process',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    }
});

FilePond.parse(document.body);

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
</head>
<body>
    <input type="file" name="filepond" required multiple>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script src="https://unpkg.com/filepond/dist/filepond.js"></script>
    <script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>
    <script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.js"></script>
    <script src="https://unpkg.com/jquery-filepond/filepond.jquery.js"></script>
</body>

</html>

File: routes\web.php

Route::prefix('api')->group(function () {
  Route::post('/process', [FilepondController::class, 'upload'])->name('filepond.upload');
  Route::delete('/process', [FilepondController::class, 'delete'])->name('filepond.delete');
});

Thank you.

Sopamo commented 3 years ago

The 422 status code is usually an indicator that the CSRF token is not present / not valid. Are you sure that the meta tag meta[name="csrf-token"] actually exists? There is a laravel helper method to generate this field which you can use in your blade template. Of course you can also set the csrf token differently, it's just important that the X-CSRF-TOKEN is set somehow.

gordonnchy commented 3 years ago

i was getting the same error, and everything was set correctly according to the documentation. i solved it by adding a name attribute value to 'file' to my file input element.

maqsudinamdar commented 3 years ago

@gordonnchy Thanks! Now uploading successfully. From <input type="file" name="filepond"> to <input type="file" name="file">

Sopamo / laravel-filepond

Unprocessable Entity: 422 while uploading file Asynchronously using filepond in Laravel #44