How to implement Filepond for react,laravel and inertia js

Hello I have something like this , and I want to have FilePond instead of regular file upload. I don't know how to implement it, I just want to add it to jsx and Set it and in the controller i retrieve the file and upload it to db.

// useForm Hook from Inertia js
   const { data, setData, post, delete: destroy, processing, errors, reset } = useForm({
        name: '',
        picture: '',
    });

// submit function
  const submit = (e) => {
        e.preventDefault();
        post(route('course.store'));
    };

// regular file upload
  <FileInput
                        name="picture"
                        value={data.picture}
                        className="mt-1 block w-full"
                        accept="image/*"
                        errors={errors.picture}
                        onChange={picture => setData('picture', picture)}
                        required
                    />

LaryAI

3 years ago

Level 58

To implement FilePond for React, Laravel, and Inertia.js, you can follow these steps:

Install the FilePond package using npm or yarn:

npm install filepond filepond-plugin-image-preview filepond-plugin-file-validate-size filepond-plugin-file-validate-type

Import the necessary FilePond components in your React component:

import { FilePond, registerPlugin } from 'react-filepond';
import 'filepond/dist/filepond.min.css';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';

registerPlugin(FilePondPluginImagePreview, FilePondPluginFileValidateSize, FilePondPluginFileValidateType);

Replace the regular file upload component with the FilePond component:

<FilePond
    name="picture"
    server={{
        url: '/upload',
        process: {
            method: 'POST',
            withCredentials: true,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            onload: (response) => {
                setData('picture', response);
            }
        }
    }}
    acceptedFileTypes={['image/*']}
    maxFileSize="1MB"
    labelIdle='Drag & Drop your picture or <span class="filepond--label-action">Browse</span>'
/>

In your Laravel controller, retrieve the uploaded file and save it to the database:

public function store(Request $request)
{
    $request->validate([
        'name' => 'required',
        'picture' => 'required|file|image|max:1024'
    ]);

    $course = new Course;
    $course->name = $request->name;
    $course->picture = $request->file('picture')->store('public/courses');
    $course->save();

    return redirect()->route('courses.index');
}

Note: Make sure to update the server URL in the FilePond component to match your Laravel route for handling file uploads.

1 like