Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
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
1 Jawaban:
Mungkin ngga bisa memastikan karena tidak ada informasi error yang di share. Sebelumnya apakah ada yg bs di share jika ada error ? dan laravel versi brp yg digunakan ?
Namun mungkin bisa di debug pada beberapa line.
- Apakah bisa pastikan $request->file('logo'); jika di print ada isinya ?
- Lalu public_path() & $request->file('logo')->getClientOriginalName() jika di print juga sudah sesuai ?
- Setelah set $validated['logo'] jika di print apakah juga sudah sesuai ?
Jika ada informasi yang lebih lengkap bisa di share lagi ya
0
