95 lines
3.5 KiB
TypeScript
95 lines
3.5 KiB
TypeScript
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 { useState } from 'react';
|
|
import { FilePond, registerPlugin } from 'react-filepond';
|
|
import { toast } from 'sonner';
|
|
|
|
registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);
|
|
|
|
export default function CarouselAdd() {
|
|
const [file, setFile] = useState<any | null>(null);
|
|
|
|
const { data, setData, post, processing, errors, wasSuccessful } = useForm({
|
|
alt: '',
|
|
image_url: null as File | null,
|
|
});
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (file) {
|
|
setData('image_url', file.file);
|
|
}
|
|
|
|
post('/carousel', {
|
|
forceFormData: true,
|
|
});
|
|
|
|
if (wasSuccessful) {
|
|
toast.success('Slider image successfully uploaded');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<AppLayout>
|
|
<Head title="Add Carousel" />
|
|
<section className="flex flex-col gap-8 px-8 py-8">
|
|
<h1 className="text-lg font-semibold tracking-tight">
|
|
Add Slider Image
|
|
</h1>
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
method="POST"
|
|
encType="multipart/formdata"
|
|
>
|
|
<div className="flex flex-col gap-4">
|
|
<Label htmlFor="title">Title</Label>
|
|
<Input
|
|
type="text"
|
|
id="title"
|
|
value={data.alt}
|
|
onChange={(e) => setData('alt', e.target.value)}
|
|
className="rounded border p-2"
|
|
/>
|
|
{errors.alt && (
|
|
<span className="text-red-600">{errors.alt}</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mt-4">
|
|
<Label>Image</Label>
|
|
<FilePond
|
|
files={file ? [file] : []}
|
|
onupdatefiles={(fileItems) => {
|
|
setFile(fileItems[0] || null);
|
|
}}
|
|
allowMultiple={false}
|
|
maxFiles={1}
|
|
name="image_url" // Change this to match your backend expectation
|
|
instantUpload={false}
|
|
storeAsFile={true}
|
|
labelIdle='Drag & Drop your image or <span class="filepond--label-action">Browse</span>'
|
|
/>
|
|
{errors.image_url && (
|
|
<span className="text-red-600">
|
|
{errors.image_url}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<Button type="submit" disabled={processing}>
|
|
{processing ? 'Uploading...' : 'Submit'}
|
|
</Button>
|
|
</form>
|
|
</section>
|
|
</AppLayout>
|
|
);
|
|
}
|