import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import AppLayout from '@/layouts/app-layout'; import { Head, useForm } from '@inertiajs/react'; import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation'; import FilePondPluginImagePreview from 'filepond-plugin-image-preview'; import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css'; import 'filepond/dist/filepond.min.css'; import { useEffect, useState } from 'react'; import { FilePond, registerPlugin } from 'react-filepond'; import { toast } from 'sonner'; registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview); export default function CarouselAdd() { // eslint-disable-next-line @typescript-eslint/no-explicit-any const [file, setFile] = useState(null); const { data, setData, post, processing, errors, wasSuccessful } = useForm({ alt: '', image_url: null as File | null, }); useEffect(() => { if (file) { setData('image_url', file.file); } }, [file, setData]); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); post('/carousel', { forceFormData: true, }); if (wasSuccessful) { toast.success('Slider image successfully uploaded'); } }; return (

Add Slider Image

Title setData('alt', e.target.value)} className="rounded border p-2" /> {errors.alt && ( {errors.alt} )}

Image { setFile(fileItems[0] || null); }} allowMultiple={false} maxFiles={1} name="image_url" instantUpload={false} storeAsFile={true} labelIdle='Drag & Drop your image or Browse' /> {errors.image_url && ( {errors.image_url} )}

); }