const formData = createFormData() doesn't work

[eamonniknafs]

const handleSubmit = async (e) => {
        e.preventDefault();

        var formData = createFormData()

        try {
            fetch('/api/upload', {
                method: 'POST',
                headers: {
                    Authorization: 'Bearer ' + props.token,
                    'content-type': 'multipart/form-data',
                    'content-length': files.length
                },
                body: formData
            })
            console.log({
                method: 'POST',
                headers: {
                    Authorization: 'Bearer ' + props.token,
                    'content-type': 'multipart/form-data',
                    'content-length': files.length
                },
                body: formData
            });
        } catch (error) {
            console.error('Failed to submit files.');
        }
    };

It doesn't seem like createFormData() properly propagates the files.

[DZuz14]

I love how Github doesn't notify you when people comment and create issues. Just saw this. @eamonniknafs

[DZuz14]

I'll have to look into it if you are still around. I know its been like a month.

[eamonniknafs]

I'm not using the library in my project anymore, but I can help diagnose and test it if you need help figuring out the issue. Let me know :)

[mdy405]

I got the same issue ...help needed.

[DZuz14]

I got the same issue ...help needed.

I'll take a look if I can, I've been taking a break from coding. Feel free to send a pull request to fix this. All the logic for this hook is here.

I can show you how to run it. I'll still take a look into this issue tomorrow morning.

[DZuz14]

@mdy405 I can't produce this currently on my local machine. Each time I attach files and click a button to create the formData, I console.log it, and indeed have the attached files in the FormData. Is there any additional information you could give me, so perhaps I could reproduce this. If you had a repository that replicates what you are talking about, that would be great too.

It doesn't make sense to me as to why it wouldn't be working. If you check out the code snippet below, that is what creates the form data.

https://github.com/DZuz14/react-use-file-upload/blob/main/src/lib/useFileUpload.ts#L105-L113

It is wrapped in a use callback with files as a dependency. In theory, this function should always be up to date with the latest files array whenever it is called in code.

[DZuz14]

@eamonniknafs If you are still interested in helping debug the library code, I could use some help. Check out the comment above ^.

[wilsonwg]

I faced the same bug. Somehow the "files" does work properly, but the formData doesn't append the array to formData object.

[wilsonwg]

I'm not too sure the reason for now. But formData.append() doesn't work on all chrome-based Browsers. It only works on Firefox.

[wilsonwg]

I replaced the for loop with a map function to get things working:

const formData = new FormData();

const updatedFormData = files.map((file) => { return { ...formData, [file.name]: file }; });

return updatedFormData;