Error getting preview of file in storage
I'm using this function to get the preview of the document/images for displaying it on frontend
export async function fetchNotesForPreview(fileId: string) { try { const result = await storage.getFilePreview( BUCKET_ID!, // bucketId fileId, // fileId 100, // width (optional) 100, // height (optional) ImageGravity.Center, // gravity (optional) 100, // quality (optional) 0, // borderWidth (optional) '#000000', // borderColor (optional) - Use a valid hex color code 0, // borderRadius (optional) 1, // opacity (optional) 0, // rotation (optional) '', // background (optional) ImageFormat.Jpg // output (optional) );
// Convert the Buffer to a Base64 URL
const base64Data = result.toString();
const previewUrl = `data:image/jpeg;base64,${base64Data}`;
console.log(previewUrl);
return previewUrl;
} catch (error) { console.log('Error fetching notes-files for preview', error); return ''; // Return an empty string or a fallback image URL } }
BUT it's giving me the above error how do I get rid of it also do u have proper docs for preview file?
earlier i tried doing this import { storage } from '@/lib/appwrite'; // Adjust the import based on your Appwrite setup
export async function fetchNotesForPreview(fileId: string) {
try {
// Construct the Appwrite file preview URL
const previewUrl = https://cloud.appwrite.io/v1/storage/buckets/${BUCKET_ID}/files/${fileId}/preview;
return previewUrl;
} catch (error) {
console.log('Error fetching notes-files for preview', error);
return ''; // Return an empty string or a fallback image URL
}
}
but it resulted in
⨯ upstream image response failed for https://cloud.appwrite.io/v1/storage/buckets/67a6452c003b5b6b6502/files/67b21d0f00368e6d6e3f/preview 401
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).
Oops, can you try dropping the # from the string?
When calling the SDK function, you can pass undefined for any param you don't want to specify
401 typically means access. But it could be because your project isn't specified if you just use the URL like that
thankss lol
where should i add it?
okay now im getting :
can i use it? it's not loading in the frontend
convert it into url? but how?
oh wait i found the solution
Can you share?
