I’m using Appwrite for my project and have implemented a service to upload images and retrieve their previews. The image IDs are correctly stored in my database after uploading, but when I attempt to fetch the image preview, it returns an undefined URL.
Here’s a brief overview of my implementation:
- Uploading Images: I upload images to Appwrite storage using the
following method:
async uploadFile(file) {
if (!(file instanceof File)) {
throw new Error("Invalid file type.");
}
try {
return await this.bucket.createFile(
conf.appwriteListingImagesBucketId,
ID.unique(),
file
);
} catch (error) {
console.error("Appwrite service :: uploadFile() :: ", error);
throw new Error("Failed to upload file.");
}
}
- Fetching Image Preview: I attempt to get the preview using this
method:
async getFilePreview(fileId) {
if (!fileId) {
throw new Error("File ID is required.");
}
try {
const result = await this.bucket.getFilePreview(
conf.appwriteListingImagesBucketId,
fileId,
1800, // width
0, // height (ignored when 0)
"center", // crop center
"90", // compression
5, // border width
"CDCA30", // border color
15, // border radius
1, // full opacity
0, // no rotation
"FFFFFF", // background color
"jpg" // output format
);
return result.href; // Return the URL for the image preview
} catch (error) {
console.error("Error fetching file preview:", error);
throw new Error("Failed to fetch file preview.");
}
}
- Using the Service: In my React component, I call getFilePreview like
this:
useEffect(() => {
const fetchPreviewUrl = async () => {
try {
const url = await listingImageService.getFilePreview(listing.images[0]);
console.log("url", url);
setPreviewUrl(url);
} catch (error) {
console.error("Error fetching image preview:", error);
}
};
fetchPreviewUrl();
}, []);
Problem:
The listing. images contain a valid file ID.
The console logs indicate that getFilePreview is being called, but the resulting URL is undefined.
I’ve checked that the bucket ID and permissions are correct.
Additional Information:
I’ve tested with various image formats (JPEG, PNG) and ensured that my Appwrite server is running correctly.
Aside from the expected error handling, there are no apparent errors in the console.
Question:
What could be causing the image preview to return an undefined URL? Are there any known issues with Appwrite’s getFilePreview method or specific configurations I should check?