Reading an image that was storage in convex
I have uploaded an image to convex data base and it is stored properly. However i am now looking to fetch the image and display it:
const getFileUrl = (fileId: string) => {
const baseUrl = process.env.NEXT_PUBLIC_CONVEX_URL;
if (!baseUrl || !fileId) {
return "";
}
return
${baseUrl}/api/storage/${fileId};
};
useEffect(() => {
if (profileData && profileData[0]) {
const profileInfo = profileData[0];
const photoPreview = getFileUrl(profileInfo.photo);
setProfile({
...profileInfo,
photoPreview,
});
}
}, [profileData]);
^the above is my code but it is using the image id that I had storaged when following convex docs:
// Step 1: Get a short-lived upload URL
const postUrl = await generateUploadUrl();
// Step 2: POST the file to the URL
const result = await fetch(postUrl, {
method: "POST",
headers: { "Content-Type": "image/png" },
body: profile.photo,
});
const { storageId } = await result.json();
How do get the correct url to be used so I can display the image correctly?2 Replies
Thank you