couldn't update the formData

Question

My goal is to send the uploaded image to the backend, but after appending it to formData, the formData looks empty. But logging the file shows there is an image in the state.

Code:

function UpdateProfile() {
    const [file, setFile]: any = useState(null);
    const handleSubmit = () => {
        const formData = new FormData();
        console.log(file);
        formData.append("profile", "file");
        console.log("formData", formData);
    };

    return (
        <>
            <Modal>
                    <ModalBody pb={6}>
                        <FormControl>
                            <FormLabel>Profile Picture</FormLabel>
                            <Input
                                name="profile"
                                type="file"
                                onChange={(e: any) => setFile(e.target.files[0])}
                            />
                        </FormControl>
                    </ModalBody>
            </Modal>
        </>
    );
}

The above console.log(file) logs,

File {name: 'burger 2.png', lastModified: 1658142356471, lastModifiedDate: Mon Jul 18 2022 16:35:56 GMT+0530 (India Standard Time), webkitRelativePath: '', size: 156243, …}

But logging formData, formData {} its empty.

CodeSandbox : https://codesandbox.io/s/musing-chatelet-bw8lh4?file=/src/App.js

`FormData` instances do not serialise to the console. Why are you logging it anyway? — Phil, Oct 17 '22 at 06:35
Does this answer your question? [How to inspect FormData?](https://stackoverflow.com/questions/17066875/how-to-inspect-formdata) — Phil, Oct 17 '22 at 06:36

score 0 · Answer 1 · answered Oct 16 '22 at 06:43

You forgot to pass form dom to form data

until you pass handleSubmit(e); default event to handle you cant't get form data and then pass e.target dom to form data to get new FormData(e.target);

https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

    function UpdateProfile() {
        const [file, setFile]: any = useState(null);
        const handleSubmit = (e) => {
            const formData = new FormData(e.target);
            console.log(file);
            formData.append("profile", "file");
            console.log("formData", formData);
        };
    
        return (
            <>

<form onSubmit={()=>{handleSubmit(e);}}>
                <Modal>
                        <ModalBody pb={6}>
                            <FormControl>
                                <FormLabel>Profile Picture</FormLabel>
                                <Input
                                    name="profile"
                                    type="file"
                                    onChange={(e: any) => setFile(e.target.files[0])}
                                />
                            </FormControl>
                        </ModalBody>
                </Modal>
            </>
        );
    }

Doesn't work, still the same issue, file is in the state, but formData seems empty — Sai Krishnadas, Oct 16 '22 at 07:35
Codesandbox link : https://codesandbox.io/s/musing-chatelet-bw8lh4?file=/src/App.js — Sai Krishnadas, Oct 17 '22 at 06:32
The `FormData` constructor does not require the `form` parameter — Phil, Oct 17 '22 at 07:35

score 0 · Answer 2 · answered Oct 17 '22 at 07:13

0

I think accessing the FormData instance doesn't work cause it supposed to be private properties. try FormData methods like .get() and .has() to access data inside it.

answered Oct 17 '22 at 07:13

Hesam

74
6

couldn't update the formData

2 Answers2