Back
Uploading Image w/ React Native
Hey there, I am trying to add an image upload feature to my ReactNative app which stores it within an Appwrite storage bucket.
Here is my current code for the image picker:
TypeScript
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
if (!result.canceled) {
console.log(await uploadImage(result.assets[0]));
}
};```
However when I try to console.log the result it is undefined and nothing gets created.
```js
export const uploadImage = async (file) => {
try {
const response = await storage.createFile(
appwriteConfig.storageId,
ID.unique(),
file
);
return response;
} catch (error) {
throw new Error(error);
}
}```
TL;DR
Developers are trying to upload an image in React Native using a Blob method, but the file isn't uploaded and the response is null.
Another developer is attempting to add an image upload feature using an image picker, but the result is undefined and no image is created.
Solution: Ensure proper handling of image files during the upload process to Appwrite storage bucket. It may be necessary to adjust the method of fetching and processing the image file before attempting the upload. If I change it into uploading as a blob like:
TypeScript
export const uploadImage = async (image) => {
console.log("===========================")
const response = await fetch(image);
console.log(response);
const blob = await response.blob();
console.log(blob);
try {
const response = await storage.createFile(
appwriteConfig.storageId,
ID.unique(),
file
);
return response;
} catch (error) {
throw new Error(error);
}
}```
It prints the blob, however nothing happens with response (No error, no nothing, but the file isnt uploaded and response is null)
