Storage from react native expo

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"

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

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

};

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;

react and react native handles files differently

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();