Android

Storage from react native expo

Dec 27, 2023, 20:22

View on Discord

Votes

Replies

Participants

Unknown

Messages

AbhijeetOriginal post

Web Developer

Jul 29, 2023, 09:45

I was trying to store my images in appwrite storage but got encountered with this error , i have use expo-image-picker to pick image from gallery in react native . please help me with this
it is showing "Network Request failed"

Summary

The user is requesting help with storing images in Appwrite storage using React Native Expo and the Expo Image Picker. The user provided code that they are using to upload files to Appwrite storage. They are encountering a "Network Request failed" error when trying to store the images. Solution: It is recommended to check the following: 1. Make sure you have a stable internet connection. 2. Verify that the server endpoint in the code is correct. 3. Check if Appwrite storage is properly configured and accessible. 4. Double-check the permissions and credentials for accessing Appwrite storage.

Moderator

Jul 29, 2023, 09:58

Could you please send the code you're using to store/send the images to appwrite and the image picker code?

Abhijeet

Web Developer

Jul 29, 2023, 10:21

const uploadToAppwrite = async (uri) => {
try {
const response = await fetch(uri);
const blob = await response.blob();

  const file = new File([blob], 'image.jpg', { type: 'image/jpeg' });

  console.log("FILE ",file);

  // Upload the file to Appwrite storage
  const promise = storageApi.uploadFile(file);      

  promise.then(function (response) {
    console.log("Create Success ==> ", response);
  }, function (error) {
    console.log("Create Error ==> ", error);
  })

  
} catch (error) {
  console.log('Error uploading file to Appwrite:', error);
}

};

Abhijeet

Web Developer

Jul 29, 2023, 10:22

import appwriteConfig, { storage } from "./appwriteConfig";
import { ID } from "appwrite";

const boatImageBucketId = appwriteConfig.Storage_BoatImageID;

let storageApi = {

getFile: (fileId) => {
const result = storage.getFilePreview(boatImageBucketId, fileId);
return result.href;
},

deleteFile: (fileId) => {
const promise = storage.deleteFile(boatImageBucketId, fileId);
return promise;
},

listFiles: () => {
return storage.listFiles(boatImageBucketId);
},

uploadFile: (File) => {
return storage.createFile(boatImageBucketId, ID.unique(), File);
},
};

export default storageApi;

rohan

Rank 4: Virtual Machine

Jul 29, 2023, 12:38

react and react native handles files differently

rohan

Rank 4: Virtual Machine

Jul 29, 2023, 12:39

this is how i do it

const formData = new FormData();
  formData.append("fileId", fileIdP);
  formData.append("file", {
    uri: uri,
    name: filename,
    type,
  });

  const response = await fetch(
    `${appwrite.config.endpoint}/storage/buckets/${bucketId}/files`,
    {
      method: "POST", // or 'PUT'
      headers: {
        ...appwrite.headers,
        "Content-Type": "multipart/form-data;",
      },
      body: formData,
    }
  );

  return response.json();

Storage from react native expo

Need support?_