ResolvedWebStorage

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

Dec 27, 2023, 20:37

View on Discord

Votes

Replies

Participants

Unknown

Messages

Tassos P.Original post

Rank 1: Thread

Jun 22, 2023, 12:01

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

Summary

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

Tassos P.

Rank 1: Thread

Jun 22, 2023, 12:07

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

Guille

Moderator

Jun 22, 2023, 12:52

Can you share the code you're using?

Tassos P.

Rank 1: Thread

Jun 22, 2023, 13:38

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 (

{image && (

<Image source={{ uri: image }} style={{ width: 200, height: 200 }} />

)}

);
}

Drake

Jun 22, 2023, 17:02

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.

Drake

Jun 22, 2023, 17:03

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

Tassos P.

Rank 1: Thread

Jun 22, 2023, 18:12

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

Drake

Jun 22, 2023, 18:23

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

Tassos P.

Rank 1: Thread

Jun 22, 2023, 19:05

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

Guille

Moderator

Jun 22, 2023, 19:24

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

Tassos P.

Rank 1: Thread

Jun 23, 2023, 07:01

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

Drake