While attempting a simple append with FormData in React Native like the following...
const formData = new FormData();
formData.append('image-data', {
uri: '/awesome-chat-app/ImagePicker/abb9-a435046e971c.jpg',
name: 'image001.jpg',
type: 'image/jpeg',
});
An issue arises when TypeScript complains...
Error: Argument of type '{ uri: any; 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 'Blob'.ts(2345)
To solve this problem, I found a way to redefine FormData as shown below... (hat tip)
interface FormDataValue {
uri: string;
name: string;
type: string;
}
interface FormData {
append(name: string, value: string | Blob | FormDataValue, fileName?: string): void;
delete(name: string): void;
get(name: string): FormDataEntryValue | null;
getAll(name: string): FormDataEntryValue[];
has(name: string): boolean;
set(name: string, value: string | Blob | FormDataValue, fileName?: string): void;
}
declare let FormData: {
prototype: FormData;
new (form?: HTMLFormElement): FormData;
};
interface FormData {
entries(): IterableIterator<[string, string | File]>;
keys(): IterableIterator<string>;
values(): IterableIterator<string | File>;
[Symbol.iterator](): IterableIterator<string | File>;
}
Implementing this solution worked perfectly within the file where the append operation was performed.
Now, the question remains - how can we define this globally in the project so that it overrides all uses of FormData?