React NativeStorageCloud

Uploading Image w/ React Native

Sep 16, 2024, 02:00

View on Discord

Votes

Replies

Participants

Unknown

Messages

catchOriginal post

Web Developer

Sep 16, 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:

JavaScript

  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);
  }
}```

Summary

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

Web Developer

Sep 16, 2024, 01:16

If I change it into uploading as a blob like:

JavaScript

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)

Uploading Image w/ React Native

Need support?_