
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

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


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.?

yes, nodejs/server-side

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

Recommended threads
- 25 document limit
Unable to bypass the 25 document limit: https://github.com/Mooshieblob1/GenerateImagesPreview
- cant get custom domain to work with appw...
Hi, how do I get a custom domain to work? I have set database.vrtuhub.com on the appwrite console as a custom domain and did the cname record for it bit i still...
- [SOLVED] Consfusing Pricing
Why the pricing is showing me to 30 dollar while the original pricing which is 15 dollar per month,it is also including the add ons pricing,which i donot know w...
