appwrite / sdk-for-react-native

[READ ONLY] Official Appwrite React Native SDK 💙 ⚛︎
https://appwrite.io
BSD 3-Clause "New" or "Revised" License
3.76k stars 21 forks source link

🐛 Bug Report: Storage error #33

Closed SOG-web closed 3 weeks ago

SOG-web commented 3 weeks ago

👟 Reproduction steps

when I try to upload files, I get network request failed. Am using expo

export const uploadDriver = async (file: ImagePickerAsset) => {
  try {
    // remove all spaces, special characters and convert to lowercase
    let name = file.fileName?.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
    name = name?.replace(/\s/g, "_");
    const response = await storage.createFile(
      DRIVER_BUCKET_ID,
      ID.unique(),
      {
        name: name!,
        type: file.type!,
        size: file.fileSize!,
        uri: file.uri,
      },
      [Permission.read(Role.any()), Permission.write(Role.any())]
    );
    return response;
  } catch (error) {
    console.log("Error uploading image", error);
    throw new Error("Failed to upload image");
  }
};
const pickImage = async () => {
    // Request permission to access media library
    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (status !== "granted") {
      alert("Sorry, we need camera roll permissions to make this work!");
      return;
    }

    // Launch image picker
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    if (!result.canceled) {
      setImage(result.assets[0]);
      try {
        const response = await uploadDriver(result.assets[0]);
        console.log("Image uploaded", response);
      } catch (error) {
        console.log("Error uploading image", error);
      }
    }
  };

👍 Expected behavior

successful upload of image

👎 Actual Behavior

LOG Error uploading image [AppwriteException: Network request failed] LOG Error uploading image [Error: Failed to upload image]

Also every other things like database insert, user creation is working without any issues, on the storage is not working

🎲 Appwrite version

Version 0.10.x

💻 Operating system

MacOS

🧱 Your Environment

No response

👀 Have you spent some time to check if this issue has been raised before?

🏢 Have you read the Code of Conduct?

SOG-web commented 3 weeks ago

have been able to solve it, this is the solution

I had to add fileTypeExtended as the type

 let name = file.fileName?.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
    name = name?.replace(/\s/g, "_");
    const uriArray = file.uri.split(".");
    const fileExtension = uriArray[uriArray.length - 1]; // e.g.: "jpg"
    const fileTypeExtended = `${file.type}/${fileExtension}`; // e.g.: "image/jpg"

    console.log("File type", fileTypeExtended);

    const response = await storage.createFile(
      DRIVER_BUCKET_ID,
      ID.unique(),
      {
        name: name!,
        type: fileTypeExtended,
        size: file.fileSize!,
        uri: file.uri,
      },
      [Permission.read(Role.any()), Permission.write(Role.any())]
    );