Postingan lainnya
Upload gambar di Laravel Inertia (React)
Apa yang salah dari kode saya berikut ini:
import { Container } from '@/components/container'
import { Header } from '@/components/header'
import {
Button,
Card,
Form,
Link,
Sheet,
SheetBody,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
Table,
TableBody,
TableCell,
TableColumn,
TableHeader,
TableRow,
TextField
} from '@/components/ui'
import { FileTrigger } from '@/components/ui/file-trigger'
import { Textarea } from '@/components/ui/textarea'
import { AppLayout } from '@/layouts'
import { Head, router, useForm } from '@inertiajs/react'
import React from 'react'
import { type Selection } from 'react-aria-components'
interface CompanyType {
id: number
logo: string | null
address: string
phone_number: string
email: string
website: string
created_at: string
}
interface Props {
datas: CompanyType[]
}
export default function MasterCompanyIndex({ datas }: Props) {
const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set())
const [isOpen, setIsOpen] = React.useState(false)
const { data, setData, reset } = useForm({
company_name: '',
logo: '',
email: '',
address: '',
phone_number: '',
website: ''
})
function handleChange(e: any) {
setData(e.target.id, e.target.value);
}
function handleFileChange(e: any) {
setData(e.target.id, e.target.files[0]);
}
function handleSubmit(e: any) {
router.post('/master-data/perusahaan', data, {
forceFormData: true,
})
reset()
}
return (
<>
<Head title="Master Data Perusahaan" />
<Header title="Master Data Perusahaan" />
<Container>
<Sheet>
<Button appearance="solid" shape="circle" size="small">
Tambah Data Perusahaan
</Button>
<SheetContent>
<Form encType='multipart/form-data' onSubmit={handleSubmit}>
<SheetHeader>
<SheetTitle>Form Tambah Data Perusahaan</SheetTitle>
<SheetDescription className="mt-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi aperiam quas mollitia
sint doloremque reiciendis nemo officiis doloribus ratione eaque aliquid, maiores
sapiente commodi recusandae aspernatur alias, ipsum natus neque!
</SheetDescription>
</SheetHeader>
<SheetBody className="mt-5 space-y-2">
<TextField
label="Nama Perusahaan"
id="company_name"
placeholder="Company Name"
type="text"
value={data.company_name}
onChange={(e) => setData('company_name', e)}
/>
<FileTrigger
label="Logo"
id="logo"
type="file"
value={data.logo}
onChange={(e) => setData('logo', e)}
/>
<TextField
label="Email"
id="email"
placeholder="Email"
type="text"
value={data.email}
onChange={(e) => setData('email', e)}
/>
<TextField
label="Phone Number"
id="phone_number"
placeholder="Phone Number"
type="text"
value={data.phone_number}
onChange={(e) => setData('phone_number', e)}
/>
<TextField
label="Website"
prefix="https://"
id="website"
placeholder="Website"
type="text"
value={data.website}
onChange={(e) => setData('website', e)}
/>
<Textarea
label="Address"
id="address"
value={data.address}
onChange={(e) => setData('address', e)}
></Textarea>
</SheetBody>
<SheetFooter>
<SheetClose>Cancel</SheetClose>
<Button intent="primary" type="submit">
Save Changes
</Button>
</SheetFooter>
</Form>
</SheetContent>
</Sheet>
<Card className="mt-5">
<Table
aria-label="Daftar Perusahaan"
selectionMode="multiple"
selectedKeys={selectedKeys}
onSelectionChange={setSelectedKeys}
>
<TableHeader>
<TableColumn>#</TableColumn>
<TableColumn>Company Name</TableColumn>
<TableColumn>Address</TableColumn>
<TableColumn>Phone Number</TableColumn>
<TableColumn>Email</TableColumn>
<TableColumn>Website</TableColumn>
<TableColumn>Created at</TableColumn>
</TableHeader>
<TableBody items={datas}>
{(item: CompanyType) => (
<TableRow key={item.id}>
<TableCell>{item.id}</TableCell>
<TableCell>{item.company_name}</TableCell>
<TableCell>{item.address}</TableCell>
<TableCell>{item.phone_number}</TableCell>
<TableCell>{item.email}</TableCell>
<TableCell>
<Link className="text-primary" href={item.website}>
{item.website}
</Link>
</TableCell>
<TableCell>{item.created_at}</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</Card>
</Container>
</>
)
}
MasterCompanyIndex.layout = (page: React.ReactNode) => <AppLayout>{page}</AppLayout>
dan berikut adalah controllernya:
public function store(Request $request)
{
$validated = $request->validate([
'company_name' => ['required', 'max:50'],
'logo' => ['nullable', 'image', 'mimes:jpg,jpeg,png,svg', 'max:2048'],
'email' => ['required', 'max:50', 'email'],
'phone_number' => ['required', 'max:50'],
'website' => ['required', 'max:50'],
'address' => ['required', 'max:50'],
]);
if ($request->hasFile('logo')) {
$logoPath = $request->file('logo')->move(public_path(), $request->file('logo')->getClientOriginalName());
$validated['logo'] = $request->file('logo')->getClientOriginalName();
}
MasterCompany::create($validated);
return to_route('master.perusahaan.index')->with('success', 'Berhasil mengirim data');
}
Mengapa data berhasil masuk kecuali untuk gambar tidak?
0
Belum ada Jawaban. Jadi yang pertama Jawaban
Login untuk ikut Jawaban