CLONESAHIBINDEN

FRONTEND GUIDE FOR AI CODING AGENTS - PART 12 - ListingImage Service

This document is a part of a REST API guide for the clonesahibinden project. It is designed for AI agents that will generate frontend code to consume the project’s backend.

This document provides extensive instruction for the usage of listingImage

Service Access

ListingImage service management is handled through service specific base urls.

ListingImage service may be deployed to the preview server, staging server, or production server. Therefore,it has 3 access URLs. The frontend application must support all deployment environments during development, and the user should be able to select the target API server on the login page (already handled in first part.).

For the listingImage service, the base URLs are:

Scope

ListingImage Service Description

Manages uploading, linking, ordering, and storing all images attached to classified listings. Enforces image file format, size, count, and metadata standards; supports multi-resolution handling and per-listing image count limits.

ListingImage service provides apis and business logic for following data objects in clonesahibinden application. Each data object may be either a central domain of the application data structure or a related helper data object for a central concept. Note that data object concept is equal to table concept in the database, in the service database each data object is represented as a db table scheme and the object instances as table rows.

listingImage Data Object: Stores metadata about each image attached to a classified listing, with enforced image count, format, size, and dimension constraints. Four separate URL fields for different resolutions. Tied to listing; managed by listing owner/admin/mod.

ListingImage Service Frontend Description By The Backend Architect

Each image attached to a listing is tracked via this service. Display order/sort of images is controlled via the sortOrder field. No more than 10 images are allowed for any listing, and only supported formats/size are accepted. Read-only access is public, create/update/delete is restricted to listing owner/admin/moderator. Images display in ordered gallery, with optional main/cover selection based on sortOrder=1. On exceeding image count or constraint errors, display informative error. Deletion is soft for restoration until the listing is removed or archived.

API Structure

Object Structure of a Successful Response

When the service processes requests successfully, it wraps the requested resource(s) within a JSON envelope. This envelope includes the data and essential metadata such as configuration details and pagination information, providing context to the client.

HTTP Status Codes:

Success Response Format:

For successful operations, the response includes a "status": "OK" property, signaling that the request executed successfully. The structure of a successful response is outlined below: 

{
  "status":"OK",
  "statusCode": 200,   
  "elapsedMs":126,
  "ssoTime":120,
  "source": "db",
  "cacheKey": "hexCode",
  "userId": "ID",
  "sessionId": "ID",
  "requestId": "ID",
  "dataName":"products",
  "method":"GET",
  "action":"list",
  "appVersion":"Version",
  "rowCount":3,
  "products":[{},{},{}],
  "paging": {
    "pageNumber":1, 
    "pageRowCount":25, 
    "totalRowCount":3,
    "pageCount":1
  },
  "filters": [],
  "uiPermissions": []
}

Additional Data

Each API may include additional data besides the main data object, depending on the business logic of the API. These will be provided in each API’s response signature.

Error Response

If a request encounters an issue—whether due to a logical fault or a technical problem—the service responds with a standardized JSON error structure. The HTTP status code indicates the nature of the error, using commonly recognized codes for clarity:

Each error response is structured to provide meaningful insight into the problem, assisting in efficient diagnosis and resolution. 

{
  "result": "ERR",
  "status": 400,
  "message": "errMsg_organizationIdisNotAValidID",
  "errCode": 400,
  "date": "2024-03-19T12:13:54.124Z",
  "detail": "String"
}

Bucket Management

(This information is also given in PART 1 prompt.)

This application has a bucket service used to store user files and other object-related files. The bucket service is login-agnostic, so for write operations or private reads, include a bucket token (provided by services) in the request’s Authorization header as a Bearer token.

Please note that all other business services require the access token in the Bearer header, while the bucket service expects a bucket token because it is login-agnostic. Ensure you manage the required token injection properly; any auth interceptor should not replace the bucket token with the access token.

User Bucket This bucket stores public user files for each user.

When a user logs in—or in the /currentuser response—there is a userBucketToken to use when sending user-related public files to the bucket service. 

{
  //...
  "userBucketToken": "e56d...."
}

To upload a file

POST {baseUrl}/bucket/upload

The request body is form-data which includes the bucketId and the file binary in the files field. 

{
    bucketId: "{userId}-public-user-bucket",
    files: {binary}
}

Response status is 200 on success, e.g., body:

{
    "success": true,
    "data": [
        {
            "fileId": "9da03f6d-0409-41ad-bb06-225a244ae408",
            "originalName": "test (10).png",
            "mimeType": "image/png",
            "size": 604063,
            "status": "uploaded",
            "bucketName": "f7103b85-fcda-4dec-92c6-c336f71fd3a2-public-user-bucket",
            "isPublic": true,
            "downloadUrl": "https://babilcom.mindbricks.co/bucket/download/9da03f6d-0409-41ad-bb06-225a244ae408"
        }
    ]
}

To download a file from the bucket, you need its fileId. If you upload an avatar or other asset, ensure the download URL or the fileId is stored in the backend.

Buckets are mostly used in object creations that require an additional file, such as a product image or user avatar. After uploading your image to the bucket, insert the returned download URL into the related property of the target object record.

Application Bucket

This Clonesahibinden application also includes a common public bucket that anyone can read, but only users with the superAdmin, admin, or saasAdmin roles can write (upload) to it.

When a user with one of these admin roles is logged in, the /login response or the /currentuser response also returns an applicationBucketToken field, which is used when uploading any file to the application bucket. 

{
  //...
  "applicationBucketToken": "e23fd...."
}

The common public application bucket ID is

"clonesahibinden-public-common-bucket"

In certain admin areas—such as product management pages—since the user already has the application bucket token, they will be able to upload related object images.

Please configure your UI to upload files to the application bucket using this bucket token whenever needed.

Object Buckets Some objects may also return a bucket token for uploading or accessing files related to that object. For example, in a project management application, when you fetch a project’s data, a public or private bucket token may be provided to upload or download project-related files.

These buckets will be used as described in the relevant object definitions.

ListingImage Data Object

Stores metadata about each image attached to a classified listing, with enforced image count, format, size, and dimension constraints. Four separate URL fields for different resolutions. Tied to listing; managed by listing owner/admin/mod.

ListingImage Data Object Frontend Description By The Backend Architect

Displays individual image information related to a listing, including all available sizes and original asset. Used in the gallery/carousel of listing details. Allows reordering (via sortOrder), and restricts total images per listing to 10. All constraints (file type, minimum/maximum dimensions, and size) must be checked before saving. Image deletion disables but does not erase record until listing is deleted. Main image is the one with the lowest sortOrder value.

ListingImage Data Object Properties

ListingImage data object has got following properties that are represented as table fields in the database scheme. These properties don’t stand just for data storage, but each may have different settings to manage the business logic.

Property Type IsArray Required Secret Description
fileSize Integer false Yes No Size of the image file in bytes.
fullUrl String false Yes No URL to a full-res processed but possibly optimized image (e.g. with max side 1600px, for gallery display).
height Float false Yes No Height of the original image, in pixels.
listingId ID false Yes No The related listing that this image belongs to.
mediumUrl String false Yes No URL to the medium-sized processed image version (e.g. 400x300px or similar).
mimeType String false Yes No MIME type of the image (e.g., image/jpeg, image/png, image/webp, image/gif).
sortOrder Integer false Yes No Order value for display in UI; the lowest value image is the cover/main image.
thumbnailUrl String false Yes No URL to the thumbnail image (small size, e.g. 120x90px).
uploadedAt Date false Yes No UTC timestamp when image was uploaded to platform.
url String false Yes No URL to the original uploaded image file (full resolution/original).
width Float false Yes No Width of the original image, in pixels.

Relation Properties

listingId

Mindbricks supports relations between data objects, allowing you to define how objects are linked together. The relations may reference to a data object either in this service or in another service. Id the reference is remote, backend handles the relations through service communication or elastic search. These relations should be respected in the frontend so that instaead of showing the related objects id, the frontend should list human readable values from other data objects. If the relation points to another service, frontend should use the referenced service api in case it needs related data. The relation logic is montly handled in backend so the api responses feeds the frontend about the relational data. In mmost cases the api response will provide the relational data as well as the main one.

In frontend, please ensure that,

1- instaead of these relational ids you show the main human readable field of the related target data (like name), 2- if this data object needs a user input of these relational ids, you should provide a combobox with the list of possible records or (a searchbox) to select with the realted target data object main human readable field.

The target object is a parent object, meaning that the relation is a one-to-many relationship from target to this object.

Required: Yes

Filter Properties

listingId

Filter properties are used to define parameters that can be used in query filters, allowing for dynamic data retrieval based on user input or predefined criteria. These properties are automatically mapped as API parameters in the listing API’s.

Default CRUD APIs

For each data object, the backend architect may designate default APIs for standard operations (create, update, delete, get, list). These are the APIs that frontend CRUD forms and AI agents should use for basic record management. If no default is explicitly set (isDefaultApi), the frontend generator auto-discovers the most general API for each operation.

ListingImage Default APIs

Operation API Name Route Explicitly Set
Create createListingImage /v1/listingimages Auto
Update updateListingImage /v1/listingimages/:listingImageId Auto
Delete deleteListingImage /v1/listingimages/:listingImageId Auto
Get getListingImage /v1/listingimages/:listingImageId Auto
List listListingImages /v1/listlistingimages/:listingId System

When building CRUD forms for a data object, use the default create/update APIs listed above. The form fields should correspond to the API’s body parameters. For relation fields, render a dropdown loaded from the related object’s list API using the display label property.

API Reference

Create Listingimage API

Create an image record attached to a listing. Enforces max 10 images per listing, allowed file types (image/jpeg, png, webp, gif), max file size (10MB), and minimum dimensions (400x300px). Only owner of related listing, admin, or moderator can add.

API Frontend Description By The Backend Architect

Show file/image upload UI, allow per-image progress and preview, error on more than 10 images, reject unsupported types/sizes/resolutions. On success, show image in gallery. Only listing owner/moderator/admin may add images.

Rest Route

The createListingImage API REST controller can be triggered via the following route:

/v1/listingimages

Rest Request Parameters

The createListingImage api has got 11 regular request parameters

Parameter Type Required Population
fileSize Integer true request.body?.[“fileSize”]
fullUrl String true request.body?.[“fullUrl”]
height Float true request.body?.[“height”]
listingId ID true request.body?.[“listingId”]
mediumUrl String true request.body?.[“mediumUrl”]
mimeType String true request.body?.[“mimeType”]
sortOrder Integer true request.body?.[“sortOrder”]
thumbnailUrl String true request.body?.[“thumbnailUrl”]
uploadedAt Date true request.body?.[“uploadedAt”]
url String true request.body?.[“url”]
width Float true request.body?.[“width”]
fileSize : Size of the image file in bytes.
fullUrl : URL to a full-res processed but possibly optimized image (e.g. with max side 1600px, for gallery display).
height : Height of the original image, in pixels.
listingId : The related listing that this image belongs to.
mediumUrl : URL to the medium-sized processed image version (e.g. 400x300px or similar).
mimeType : MIME type of the image (e.g., image/jpeg, image/png, image/webp, image/gif).
sortOrder : Order value for display in UI; the lowest value image is the cover/main image.
thumbnailUrl : URL to the thumbnail image (small size, e.g. 120x90px).
uploadedAt : UTC timestamp when image was uploaded to platform.
url : URL to the original uploaded image file (full resolution/original).
width : Width of the original image, in pixels.

REST Request To access the api you can use the REST controller with the path POST /v1/listingimages 

  axios({
    method: 'POST',
    url: '/v1/listingimages',
    data: {
            fileSize:"Integer",  
            fullUrl:"String",  
            height:"Float",  
            listingId:"ID",  
            mediumUrl:"String",  
            mimeType:"String",  
            sortOrder:"Integer",  
            thumbnailUrl:"String",  
            uploadedAt:"Date",  
            url:"String",  
            width:"Float",  
    
    },
    params: {
    
        }
  });

REST Response

{
	"status": "OK",
	"statusCode": "201",
	"elapsedMs": 126,
	"ssoTime": 120,
	"source": "db",
	"cacheKey": "hexCode",
	"userId": "ID",
	"sessionId": "ID",
	"requestId": "ID",
	"dataName": "listingImage",
	"method": "POST",
	"action": "create",
	"appVersion": "Version",
	"rowCount": 1,
	"listingImage": {
		"id": "ID",
		"fileSize": "Integer",
		"fullUrl": "String",
		"height": "Float",
		"listingId": "ID",
		"mediumUrl": "String",
		"mimeType": "String",
		"sortOrder": "Integer",
		"thumbnailUrl": "String",
		"uploadedAt": "Date",
		"url": "String",
		"width": "Float",
		"isActive": true,
		"recordVersion": "Integer",
		"createdAt": "Date",
		"updatedAt": "Date",
		"_owner": "ID"
	}
}

Delete Listingimage API

Remove (soft delete) this image record. Only admin, moderator, or owner of related listing may take action. Image stays in database; actual asset removal is scheduled or handled in listing/bucket image service.

API Frontend Description By The Backend Architect

Provide a delete/trash icon per image. Show immediate feedback on delete (soft delete). Remove from gallery and reflow grid/order. Deletion disables but does not erase image from DB or storage bucket (handled asynchronously).

Rest Route

The deleteListingImage API REST controller can be triggered via the following route:

/v1/listingimages/:listingImageId

Rest Request Parameters

The deleteListingImage api has got 1 regular request parameter

Parameter Type Required Population
listingImageId ID true request.params?.[“listingImageId”]
listingImageId : This id paremeter is used to select the required data object that will be deleted

REST Request To access the api you can use the REST controller with the path DELETE /v1/listingimages/:listingImageId 

  axios({
    method: 'DELETE',
    url: `/v1/listingimages/${listingImageId}`,
    data: {
    
    },
    params: {
    
        }
  });

REST Response

{
	"status": "OK",
	"statusCode": "200",
	"elapsedMs": 126,
	"ssoTime": 120,
	"source": "db",
	"cacheKey": "hexCode",
	"userId": "ID",
	"sessionId": "ID",
	"requestId": "ID",
	"dataName": "listingImage",
	"method": "DELETE",
	"action": "delete",
	"appVersion": "Version",
	"rowCount": 1,
	"listingImage": {
		"id": "ID",
		"fileSize": "Integer",
		"fullUrl": "String",
		"height": "Float",
		"listingId": "ID",
		"mediumUrl": "String",
		"mimeType": "String",
		"sortOrder": "Integer",
		"thumbnailUrl": "String",
		"uploadedAt": "Date",
		"url": "String",
		"width": "Float",
		"isActive": false,
		"recordVersion": "Integer",
		"createdAt": "Date",
		"updatedAt": "Date",
		"_owner": "ID"
	}
}

Get Listingimage API

Retrieve details/metadata of one image for a listing. Publicly accessible for gallery/carousel; has no sensitive info.

API Frontend Description By The Backend Architect

Used to fetch image details (URLs for all resolutions and display order) for single-image views. All users can access listing image detail for active listings.

Rest Route

The getListingImage API REST controller can be triggered via the following route:

/v1/listingimages/:listingImageId

Rest Request Parameters

The getListingImage api has got 1 regular request parameter

Parameter Type Required Population
listingImageId ID true request.params?.[“listingImageId”]
listingImageId : This id paremeter is used to query the required data object.

REST Request To access the api you can use the REST controller with the path GET /v1/listingimages/:listingImageId 

  axios({
    method: 'GET',
    url: `/v1/listingimages/${listingImageId}`,
    data: {
    
    },
    params: {
    
        }
  });

REST Response

This route’s response is constrained to a select list of properties, and therefore does not encompass all attributes of the resource. 

{
	"status": "OK",
	"statusCode": "200",
	"elapsedMs": 126,
	"ssoTime": 120,
	"source": "db",
	"cacheKey": "hexCode",
	"userId": "ID",
	"sessionId": "ID",
	"requestId": "ID",
	"dataName": "listingImage",
	"method": "GET",
	"action": "get",
	"appVersion": "Version",
	"rowCount": 1,
	"listingImage": {
		"isActive": true
	}
}

List Listingimages API

List all images belonging to a specific listing, sorted by sortOrder ascending. Returns up to 10 images per listing. Publicly accessible for populating image galleries.

API Frontend Description By The Backend Architect

Display all images in a listing as a gallery or carousel, sorted by sortOrder (lowest/1 is main image/cover). Maximum images per listing is 10. Used on public listing detail pages and for listing management.

Rest Route

The listListingImages API REST controller can be triggered via the following route:

/v1/listlistingimages/:listingId

Rest Request Parameters

The listListingImages api has got 1 regular request parameter

Parameter Type Required Population
listingId ID true request.query?.[“listingId”]
listingId : The related listing that this image belongs to… The parameter is used to query data.

REST Request To access the api you can use the REST controller with the path GET /v1/listlistingimages/:listingId 

  axios({
    method: 'GET',
    url: `/v1/listlistingimages/${listingId}`,
    data: {
    
    },
    params: {
             listingId:'"ID"',  
    
        }
  });

REST Response

This route’s response is constrained to a select list of properties, and therefore does not encompass all attributes of the resource. 

{
	"status": "OK",
	"statusCode": "200",
	"elapsedMs": 126,
	"ssoTime": 120,
	"source": "db",
	"cacheKey": "hexCode",
	"userId": "ID",
	"sessionId": "ID",
	"requestId": "ID",
	"dataName": "listingImages",
	"method": "GET",
	"action": "list",
	"appVersion": "Version",
	"rowCount": "\"Number\"",
	"listingImages": [
		{
			"isActive": true
		},
		{},
		{}
	],
	"paging": {
		"pageNumber": "Number",
		"pageRowCount": "NUmber",
		"totalRowCount": "Number",
		"pageCount": "Number"
	},
	"filters": [],
	"uiPermissions": []
}

Update Listingimage API

Update sort order or image metadata; user is limited to manipulating images of their own listings (or admins/mods). Cannot move image to another listing. Can revalidate constraints on request.

API Frontend Description By The Backend Architect

Allow user to reorder images of a listing (changing sortOrder), set another main image (sortOrder=1), or update image metadata. Show error if trying to move image between listings or violate constraints.

Rest Route

The updateListingImage API REST controller can be triggered via the following route:

/v1/listingimages/:listingImageId

Rest Request Parameters

The updateListingImage api has got 2 regular request parameters

Parameter Type Required Population
listingImageId ID true request.params?.[“listingImageId”]
sortOrder Integer false request.body?.[“sortOrder”]
listingImageId : This id paremeter is used to select the required data object that will be updated
sortOrder : Order value for display in UI; the lowest value image is the cover/main image.

REST Request To access the api you can use the REST controller with the path PATCH /v1/listingimages/:listingImageId 

  axios({
    method: 'PATCH',
    url: `/v1/listingimages/${listingImageId}`,
    data: {
            sortOrder:"Integer",  
    
    },
    params: {
    
        }
  });

REST Response

{
	"status": "OK",
	"statusCode": "200",
	"elapsedMs": 126,
	"ssoTime": 120,
	"source": "db",
	"cacheKey": "hexCode",
	"userId": "ID",
	"sessionId": "ID",
	"requestId": "ID",
	"dataName": "listingImage",
	"method": "PATCH",
	"action": "update",
	"appVersion": "Version",
	"rowCount": 1,
	"listingImage": {
		"id": "ID",
		"fileSize": "Integer",
		"fullUrl": "String",
		"height": "Float",
		"listingId": "ID",
		"mediumUrl": "String",
		"mimeType": "String",
		"sortOrder": "Integer",
		"thumbnailUrl": "String",
		"uploadedAt": "Date",
		"url": "String",
		"width": "Float",
		"isActive": true,
		"recordVersion": "Integer",
		"createdAt": "Date",
		"updatedAt": "Date",
		"_owner": "ID"
	}
}

_fetch Listlistingimage API

System API to fetch list of listingImage records for frontend application. Auto-generated, not visible in design.

Rest Route

The _fetchListListingImage API REST controller can be triggered via the following route:

/v1/_fetchlistlistingimage

Rest Request Parameters

Filter Parameters

The _fetchListListingImage api supports 1 optional filter parameter for filtering list results:

listingId (ID): The related listing that this image belongs to.

REST Request To access the api you can use the REST controller with the path GET /v1/_fetchlistlistingimage 

  axios({
    method: 'GET',
    url: '/v1/_fetchlistlistingimage',
    data: {
    
    },
    params: {
    
        // Filter parameters (see Filter Parameters section above)
        // listingId: '<value>' // Filter by listingId
            }
  });

REST Response

{
	"status": "OK",
	"statusCode": "200",
	"elapsedMs": 126,
	"ssoTime": 120,
	"source": "db",
	"cacheKey": "hexCode",
	"userId": "ID",
	"sessionId": "ID",
	"requestId": "ID",
	"dataName": "listingImages",
	"method": "GET",
	"action": "list",
	"appVersion": "Version",
	"rowCount": "\"Number\"",
	"listingImages": [
		{
			"id": "ID",
			"fileSize": "Integer",
			"fullUrl": "String",
			"height": "Float",
			"listingId": "ID",
			"mediumUrl": "String",
			"mimeType": "String",
			"sortOrder": "Integer",
			"thumbnailUrl": "String",
			"uploadedAt": "Date",
			"url": "String",
			"width": "Float",
			"isActive": true,
			"recordVersion": "Integer",
			"createdAt": "Date",
			"updatedAt": "Date",
			"_owner": "ID",
			"listing": [
				{
					"attributes": "Object",
					"categoryId": "ID",
					"condition": "Enum",
					"condition_idx": "Integer",
					"contactEmail": "String",
					"contactPhone": "String",
					"currency": "String",
					"description": "Text",
					"expiresAt": "Date",
					"favoriteCount": "Integer",
					"isPremium": "Boolean",
					"listingType": "Enum",
					"listingType_idx": "Integer",
					"locationId": "ID",
					"_paymentConfirmation": "String",
					"premiumExpiry": "Date",
					"premiumType": "Enum",
					"premiumType_idx": "Integer",
					"price": "Double",
					"status": "Enum",
					"status_idx": "Integer",
					"subcategoryId": "ID",
					"title": "String",
					"userId": "ID",
					"viewsCount": "Integer",
					"paymentConfirmation": "Enum",
					"paymentConfirmation_idx": "Integer"
				},
				{},
				{}
			]
		},
		{},
		{}
	],
	"paging": {
		"pageNumber": "Number",
		"pageRowCount": "NUmber",
		"totalRowCount": "Number",
		"pageCount": "Number"
	},
	"filters": [],
	"uiPermissions": []
}

After this prompt, the user may give you new instructions to update the output of this prompt or provide subsequent prompts about the project.