CODEWITHSUNDEEP
phplaravelfile-uploadxmlhttprequestfilepond
Maqsud
Maqsud

Reputation: 827

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

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>
    <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.

Upvotes: 0

Views: 1589

Answers (1)

Maqsud
Maqsud

Reputation: 827

I solved it by adding a name attribute value to file to my file input element. From <input type="file" name="filepond"> to <input type="file" name="file">.

Upvotes: 1

Related Questions