[SOLVED] How can we upload files to storage bucket in a react native / expo app?

I am struggling 2 days to figure out a way to construct a file object and upload it to the server, but in vain! I have tried either the fetch and blob or even the Formdata but no result. Everytime it says no file.... or once I ve managed to upload it uploaded a file with the name but without data ... 0 bytes #reactnative #expo

TL;DR

Summary: User is looking for a way to upload files to a storage bucket in a React Native/Expo app but is having trouble figuring it out. They have tried using fetch, blob, and FormData but haven't had any success. They are seeking a more "native" approach for this functionality in the future. Solution: The user shares their code which includes using the `expo-image-picker` library to select an image and then using the `fetch` function and `response.blob()` method to convert the image into a blob. They then create a `File` object and use the `filesStorage.createFile()` method to upload the

How can we upload files to storage bucket in a react native / expo app? 48 hours no result!

Can you share the code you're using?

import React, { useState } from "react"; import { Button, Image, SafeAreaView, View } from "react-native"; import * as ImagePicker from "expo-image-picker";

import { Client, ID, Storage } from "appwrite";

const client = new Client(); client .setEndpoint(MY_ENDPOINT) .setProject(MY_PROJECT_ID);

const bucketId = MY_BUCKET_ID; const filesStorage = new Storage(client);

export default function ImagePickerScreen() { const [image, setImage] = useState(null);

const uploadFile = async (file) => { return filesStorage.createFile(file, ID.unique()); };

const pickImage = async () => { const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync(); if (status !== "granted") { console.log("Permission denied!"); return; }

TypeScript

const result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ImagePicker.MediaTypeOptions.Images,
  allowsEditing: true,
  quality: 1,
});

if (!result.canceled) {
  setImage(result.assets[0].uri);
}

};

const handleUploadFile = async () => { if (!image) { console.log("No image selected!"); return; }

TypeScript

try {
  const response = await fetch(image);
  const blob = await response.blob();
  console.log(blob);
  const file = new File([blob], "image.jpg", { type: "image/jpeg" });
  const uploadedFile = await uploadFile(file);
  console.log("File uploaded successfully:", uploadedFile);
} catch (error) {
  console.log("Error uploading file:", error);
}

};

return ( <SafeAreaView> <Button title="Pick an image" onPress={pickImage} /> {image && ( <View> <Image source={{ uri: image }} style={{ width: 200, height: 200 }} /> <Button title="Upload" onPress={handleUploadFile} /> </View> )} </SafeAreaView> ); }

FYI, it's best to wrap code in backticks to format a bit nicer. You can use 1 backtick for inline code (https://www.markdownguide.org/basic-syntax/#code) and 3 backticks for multiline code (https://www.markdownguide.org/extended-syntax/#syntax-highlighting.

See https://github.com/appwrite/sdk-for-web/issues/27

Steven thank you. To be honest I used tis code and worked just fine.... the problem is that this procedure has slidly diferent approach that that you provide in the documentation.....

yes, because of what's mentioned in the issue: the SDK is designed for web, but react native handles files/mutli-form data differently

eventually/ideally, we'd update the SDK to somehow handle this for you

thank you..... I look forward to a more "native" 🙂 approach in the future!👍

[SOLVED] How can we upload files to storage bucket in a react native / expo app? 48 hours no result!

Just a quick question? the InputFile.fromPath(filePath, filename) and similar where are we supposed to use them? only server side... nodejs etc.?