React-final-form: Multipart Form Data

[ryan-ds17]

Can you please provide an example for submitting multipart form data?

[erikras]

Final Form manages form data as JSON. If you're doing file uploads, you'll have to get that data from the <input type="file"/> component yourself. I use react-dropzone in all of my apps that need file uploads.

[valentynminaiev]

@erikras could you provide some example with react-dropzone?

[djeeg]

I'll post what I figured out

https://codesandbox.io/s/ww5mkm7nn8

If you are using validateOnBlurmake sure you props.blur() in Dropzone.onDrop

[erikras]

@djeeg Very cool demo... but does that really help you "submit" the file to the server?

File inputs are complicated... 😦

[djeeg]

Yeah got this working.

Submit boils down to something like this (sans a chain of redux/redux-saga)

const onSubmit = async values => {
    var formData = new FormData();
    formData.append("company", values.company);
    if (values.file_logo && values.file_logo.length > 0) {
        formData.append("file_logo", values.file_logo[0]);
    } else if (values.logourl) {
        formData.append("logourl", values.logourl);
    }
    return fetch("/company/create", {
        method: "POST",
                body: formData,
    })
}

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.