upload file with inertia react and laravel 9

Question

im have problem with upload file with inertia react and laravel 9 i use this exact code but when i choose a file i got errors in console https://inertiajs.com/file-uploads

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components
input
form
Create@http://127.0.0.1:5173/resources/js/Pages/Admin/Setting/Content/ContactUs/Create.jsx?t=1659389601569:28:14
s@http://127.0.0.1:5173/node_modules/.vite/deps/@inertiajs_inertia-react.js?v=0d793d15:741:16

The above error occurred in the <input> component:

input
form
Create@http://127.0.0.1:5173/resources/js/Pages/Admin/Setting/Content/ContactUs/Create.jsx?t=1659389680993:28:14
s@http://127.0.0.1:5173/node_modules/.vite/deps/@inertiajs_inertia-react.js?v=0d793d15:741:16

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

this is my code

import React from "react";

import Button from "@mui/material/Button";
import { Link, useForm, usePage } from "@inertiajs/inertia-react";

export default function Create() {
    const { data, setData, post, progress } = useForm({
        name: null,
        avatar: null,
    });

    function submit(e) {
        e.preventDefault();
        post("/users");
    }

    return (
        <form onSubmit={submit}>
            <input
                type="text"
                value={data.name}
                onChange={(e) => setData("name", e.target.value)}
            />
            <input
                type="file"
                value={data.avatar}
                onChange={(e) => setData("avatar", e.target.files[0])}
            />
            {progress && (
                <progress value={progress.percentage} max="100">
                    {progress.percentage}%
                </progress>
            )}
            <button type="submit">Submit</button>
        </form>
    );
}

i think its problem with onChange={(e) => setData("avatar", e.target.files[0])}

JDomenech · Accepted Answer · 2022-10-20 07:53:49Z

0

I had the same issue... I solved removing the value attribute from the input type="file".

 <input
    type="file"
    onChange={(e) => setData("avatar", e.target.files[0])}
 />

(If you see in the documentation the same example for svelte or vue, you will not see the value attribute there).

answered Oct 20, 2022 at 7:53

JDomenech

11 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

upload file with inertia react and laravel 9

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related