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?

avatar yuxxeun
@yuxxeun

97 Kontribusi 50 Poin

Diperbarui 1 bulan yang lalu

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.

  1. Apakah bisa pastikan $request->file('logo'); jika di print ada isinya ?
  2. Lalu public_path() & $request->file('logo')->getClientOriginalName() jika di print juga sudah sesuai ?
  3. Setelah set $validated['logo'] jika di print apakah juga sudah sesuai ?

Jika ada informasi yang lebih lengkap bisa di share lagi ya

avatar keccikun
@keccikun

368 Kontribusi 197 Poin

Dipost 1 bulan yang lalu

Login untuk ikut Jawaban