How to send multipart form data with React (Next) / Redux / Saga? - reactjs

Question

I am sending img file with usual React Saga and Next.js. I never worked with sending multipart form data so I don't know how to do it. I usually send image in a body in base64 format.
This is UI part:
const onUploadLogo = (e) => {
var img = e.target.files[0]
let formData = new FormData()
formData.append("file", img)
console.log('image check => ', img)
console.log('formData check => ', formData)
updateLogoFunc({ // this is the API call
formData // body
})
}
<label className="custom-file-upload">
<input type="file" onChange={onUploadLogo} accept="image/*" />
Attach
</label>
In 'image check => ' I see that my image is uploaded, I see the file, however 'formData check => ' gives me undefined. Just fyi, saga call of API works just fine, no problem with that. If you need the code of saga:
export function* updateLogoSaga(action) {
try {
yield put(setLoader(true))
const response = yield ApiStore.garage.post(`UpdateLogo`, action.values)
yield put(setLoader(false))
} catch (error) {
yield put(setLoader(false))
}
}
My problem is I do not know how to send this damn image as multipart form data by POST call.

Answer 1

var img = e.target.files[0]
const formData = new FormData();
formData.append("file", img);
So far you got the file, but it is important how you are going to send it to the server.
If you need to send a buffer
const buffer = await file.arrayBuffer();
or as bytes
// each entry of array should contain 8 bits
const bytes = new Uint8Array(buffer);
So now your data is ready, you have to send it to the server. But it is not clear how you are going to send it to the server. are you going to send the image separete from other form inputs (In some case you might verify the image so you handle it separately). If you are going to send the image with form, together with other inputs inside a submitHandler it is better you write the above code inside onChange, set the file as state value and inside submitHandler you dispatch the input values. So far is the process of handling the image.
In saga, you have to create an action with type and your saga store would be listening to that type and once it receives that type, it will call the updateLogoSaga and your updateLogoSaga is seems correct.