2

I've been dealing with this problem for a while now apparently you can upload a image using FormData and appending the file but I am still unable to get this to work. I have already tried with the following threads:

My first problem revolves around FormData().append(), in most solutions a blob/file is configured using the uri property but I don't have access to this property (Is this related to Typescript?). So something like this:

formData.append("profile_photo", {
     uri: values.imageURI
});

Here's the error TS is returning:

Argument of type '{ uri: string; }' is not assignable to parameter of type 'string | Blob'.
Object literal may only specify known properties, and 'uri' does not exist in type 'Blob'.ts(2345)

Another key points is setting up my axios client with the Content-Type header, I've done this during my POST request like so:

 // Perform a profile post request
const profileResponse = await loginClient.post(
      "/user_profile",
       formData,
       {
           headers: {
                "Content-Type": "multipart/form-data",
            },
       }
);

But by logging my request with Axios' interceptors, here how the request headers look like:

    headers:
    Accept: "application/json"
    Authorization: "Bearer 36|8SVw1DntRKni0sUn4NDX9moLluCHyYcZSadfgI5B"
    __proto__: Object

Just a few observations:

Jeremy
  • 1,447
  • 20
  • 40
  • `formData.append("profile_photo", values.imageURI);` ? [documentation](https://developer.mozilla.org/en-US/docs/Web/API/FormData/append) - oops, nevermind, react-native may be different - sorry – Jaromanda X Sep 28 '20 at 01:11
  • `values` contains my submit form values, `values.imageURI` contains the image local uri. – Jeremy Sep 28 '20 at 01:13
  • yes, it does - not sure how that relates to the type of data formData.append expects (string or blob I think the error states - you're passing an object) - try [this SO question](https://stackoverflow.com/questions/32441963/how-to-use-formdata-in-react-native) – Jaromanda X Sep 28 '20 at 01:15

2 Answers2

1

Solved by using the Form-Data module, then you can easily pass in the uri like so:

formData.append("profile_photo", {
        uri: values.imageURI,
        name: "image.png",
        type: "image/png",
});

This could be improved by extracting the type from the uri tho.

Jeremy
  • 1,447
  • 20
  • 40
0

You need to send these 3 values while uploading a file.

  1. URI.
  2. Name.
  3. Type.

You can get all these values from the file picker. Send it as

const formData = new FormData();
formData.append("profile_photo", {
  uri: values.imageURI,
  name: values.name || "profile_photo.png",
  type: values.type || "image/png"
});

axios.post('upload_file', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
});
Omkar Kulkarni
  • 1,091
  • 10
  • 22
  • I was setting these 3 properties but I had to install the Form-Data module in order to get it to work. – Jeremy Sep 28 '20 at 09:11
  • FormData is actually a constructor and it is inbuilt with javascript – Omkar Kulkarni Sep 28 '20 at 10:02
  • Yes, but it would not allow me to use the `uri` nor `name` properties. I guess RN works differently. [Doc here](https://developer.mozilla.org/en-US/docs/Web/API/FormData/append) – Jeremy Sep 29 '20 at 02:34