Use same format in Typescript

[josauder]

Hi, I was wondering how to to the same thing in typescript. I get an error with this line:

data.append('photo', {
  uri: photo.uri,
  type: 'image/jpeg', 
  name: 'testPhotoName'
});

Because of a type mismatch:

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

The documentation of FormData.append looks nothing like the code described above. Does anybody have an idea how to solve this?

[challme28]

I have the same issue with flowtype.
It shows me three possible methods that do not fit my needs:

• append(name: string, value: string): void;
• append(name: string, value: Blob, filename?: string): void;
• append(name: string, value: File, filename?: string): void;

[LorandP]

For the blob parameter use:
JSON.stringify({ uri: photo.uri, type: 'image/jpeg', name: 'testPhotoName' });

[bpred754]

JSON.stringify didn't work for me. @josauder @challme28 Were you guys able to get this to work?

[bpred754]

For anyone else that comes across this. @LorandP's answer didn't work, but it was close. I was getting JSON parse [EOF] errors. This is what I ended up with:

JSON.parse(JSON.stringify({ uri: photo.uri, type: 'image/jpeg', name: 'testPhotoName' }));

Probably not the best approach, but I spent far too long trying to find a better way.

[cuongtkqn]

Same issue, how to fix this?

[dickerpulli]

@josauder did you solve the problem? How?

[ahmed-ismail-nt]

JSON.parse(JSON.stringify({ uri: photo.uri, type: 'image/jpeg', name: 'testPhotoName' }));

Isn't this basically just the same as type casting as any?

[albertoammar]

JSON.parse(JSON.stringify({ uri: photo.uri, type: 'image/jpeg', name: 'testPhotoName' }));

Isn't this basically just the same as type casting as any?

exactly

[witalobenicio]

It's better to cast to unknown and then to Blob.

{} as unknown as Blob

[LeandrodeLimaC]

Same problem here... I got this error and I was unable to fix
any other solution other than casting?

[lavin67]

@witalobenicio
same here,

 const imgData = new FormData();
 const imgData = new FormData();
    imgData.append("files", {
      uri: image,
      name: "image.jpg",
      type: "image/jpg",
    } as unknown as Blob);
    console.log("i am imgData", imgData);

the output is empty ( i am imgData FormData {}), the formData is empty

[oloohezbon]

const photo = { uri: uri, type: 'image/jpeg', name: 'photo.jpg', }; const data = new FormData(); data.append('file', photo as unknown as File);

Above sorted it out.

[lavin67]

This worked for me

 let localUri = _image.assets[0].uri;
      let filename = localUri?.split("/").pop();

      // Infer the type of the image
      let match = /\.(\w+)$/.exec(filename!);
      let type = match ? `image/${match[1]}` : `image`;

      // Upload the image using the fetch and FormData APIs
      let form = new FormData();
      const response = await fetch(localUri as string);
      const blob = await response.blob();
      // Assume "photo" is the name of the form field the server expects
      form.append(
        "files",
        JSON.parse(JSON.stringify({ uri: localUri, name: filename!, type }))
      );

      setImage(_image.assets?.map((x) => x.uri)[0]);

[Qwertytesttest]

It's better to cast to unknown and then to Blob.

{} as unknown as Blob

It performed flawlessly

[okalil]

Extending FormData interface globally works form me:

declare global {
  interface FormData {
    append(
      name: string,
      value: { uri: string; name: string; type: string }
    ): void;
  }
}

Unfortunately form data works differently in React Native compared to web.
With that way you don't need to cast values every time.