Back

JSM React Native App - FilePreview Issue

  • 0
  • Functions
  • Storage
  • Cloud
rawlenightlong
28 May, 2024, 00:48

n the home stretch and I can't seem to figure out how to get around this "TypeError: unable to read property "$id" of undefined - i'm getting it in the "UploadFile" appwrite.js function and for whatever reason can't figure out why - code below:

TypeScript
export const getFilePreview = async (fileId, type) => {
  let fileUrl;

  try {
    if (type === "video") {
      fileUrl = storage.getFileView(storageId, fileId);
    } else if (type === "image") {
      fileUrl = storage.getFilePreview(
        storageId,
        fileId,
        2000,
        2000,
        "top",
        100
      );
    } else {
      throw new Error("Invalid file type");
    }

    if (!fileUrl) {
      throw Error;
    }

    return fileUrl;
  } catch (error) {
    throw new Error(error);
  }
};

export const uploadFile = async (file, type) => {
  if (!file) return;

  const { mimeType, ...rest } = file;
  const asset = { type: mimeType, ...rest };

  try {
    const uploadedFile = await storage.createFile(
      storageId,
      ID.unique(),
      asset
    );

    const fileUrl = await getFilePreview(uploadedFile.$id, type);
    console.log(fileUrl)
    return fileUrl;
  } catch (error) {
    console.log('1')
    throw new Error(error);
  }
};

the "console.log(1)" is where the error is coming up - meaning uploadedFile is coming up undefined, hence why reading uploadedFile.$id triggers the error - i have tried to console.log(fileUrl) before the return but nothing comes up and it goes straight to the catch...any tips???

TL;DR
Issue: Developer encountering "TypeError: unable to read property "$id" of undefined" in the React Native app's UploadFile function while trying to get a file preview. The error is traced to uploadedFile being undefined. Solution: Make sure that the uploadedFile object is successfully created before calling getFilePreview function. This could involve checking the value returned by storage.createFile. Consider verifying the data flow and error handling within the code.
Reply

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more