Back

Uploading Image w/ React Native

  • 0
  • React Native
  • Storage
  • Cloud
catch
16 Sep, 2024, 01:12

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 images with React Native using fetch and blob but facing issues with null response. The solution provided is to change it to use `ImagePicker.launchImageLibraryAsync` and then pass the image to the `uploadImage` function. This should successfully upload the image to Appwrite storage bucket.
catch
16 Sep, 2024, 01:16

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)
Reply

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more