Uploading Files

[nikolayg]

Any idea/examples on how to upload a file with redux-api-middleware?

[coldfish]

For multipart sending, you can try this method in your action file:

export function uploadFile(htmlFile) {
  const data = new FormData();
  data.append('file', htmlFile);
  return {
    [CALL_API]: {
      endpoint: `${ROOT_URL}/upload`,
      method: 'POST',
      headers: {
        'Content-type': 'multipart/form-data, boundary=--abc--abc--'
      },
      body: data,
      types: [UPLOAD_BEGIN, UPLOAD_SUCCESS, UPLOAD_FAILURE],
    },
  };
}

[mhfowler]

For us, we tried adding the Content-Type header after reading this issue and were unable to get it to work for a few hours due to our boundary not actually being ---abc--abc-- (and not realizing this at first). Perhaps the boundary in this answer was just left as a placeholder, but in case it is helpful to anyone who was confused like us, ultimately we were able to make file uploading work by not specifying the Content-Type at all, and letting the browser auto-fill the Content-Type with the correct boundary that we needed

[matymad]

I have issues uploading a video file recorded with a webcam (redux-api-middleware 3.0.1).

My code:

const video = this.recordedVideo.getBlob();
const body = new FormData();
body.append("token", this.props.token);
body.append("video", video, "video." + video.type.split("/")[1]);

[RSAA]: {
    endpoint: "URL",
    method: "POST",
    body: body,
    headers: {
      "Content-type": "multipart/form-data, boundary=--abc--abc--"
    },
    types: [
      POSTULANT_VIDEO_UPLOAD,
      POSTULANT_VIDEO_UPLOAD_SUCCESS,
      POSTULANT_VIDEO_UPLOAD_FAILURE
    ]
  }

And the Request Payload is formated like this and my server is returning 502 (bad gateway):

Any ideas of why it's happening?