Connecting Product Image With the Product data

[surjeet88]

"Hi, guys! It's my first time working with a Backend as a Service for the backend. I am currently building my Next.js E-commerce web app. As we know, storing images and files directly in the database is not feasible. In Appwrite, we need to store them in Storage. My question is, how do I connect my product data with the related image and fetch the corresponding images for a product?"

[minecrawler]

You can store the file's ID in the database. For example I store additional user data in the DB, and I connect it to Authentication and Storage using the IDs. When a user logs in I search for the Authentication ID in the user DB, get the avatar field and then ask Storage for a file in a bucket with a certain ID in order to get the link to the avatar file in order to display it.

Something like this:

const account = account.get();
const userDataFromDB = databases.listDocuments(CDBApp, CColUser, [Query.equal('id', account!.$id)]).document[0];
const avatarUrl = storage.getFileView(CBucketProfileId, userDataFromDB!.avatarId).href;

In your case, you'd store the product's info along with the file ID inside your DB and then get the url from the Storage API using that ID.

// 1. get information necessary to display product, e.g.:
const productId = currentPath.split('/').pop();
// 2. get data from DB
const productFromDB = databases.listDocuments(CDBApp, CColProduct, [Query.equal('id', productId)]).document[0];
// 3. get link to product image from Storage
const avatarUrl = storage.getFileView(CBucketProductImages, productFromDB!.previewImage).href;

Please keep in mind that each step needs a lot more than just this one-line invocation. I left out stuff like error-handling for readability.