The Catalog Images app provides REST and GraphQL APIs for saving or deleting catalog images in File Manager without overriding images with the same name.
This app is available only to sellers invited through Seller Portal and have the Seller Portal Edition app enabled by default.
If your store operates under a standard VTEX account, you can upload images through the Admin, spreadsheet, or the Catalog APIs.
Before you begin
Install the app
Using VTEX IO CLI, log in to your account and run the following command to install the Catalog Images app:
_10vtex install vtex.catalog-images@0.x
Create a local token
First, you must have an appKey and appToken to use as authentication headers in the app requests. See Authentication for more information on obtaining these credentials.
Using your appKey and appToken, make the following API request to obtain a local token, which the app requires. Replace {{accountName}}
with your VTEX account name, and {{my_appkey}}
and {{my_apptoken}}
with their respective values.
Request local token:
_10curl --location --request POST 'http://api.vtexcommercestable.com.br/api/vtexid/apptoken/login?an={{accountName}}' \_10--header 'Content-Type: application/json' \_10--data-raw '{_10 "appkey": "{{my_appkey}}",_10 "apptoken": "{{my_apptoken}}"_10}'
Response:
_10{_10 "authStatus": "Success",_10 "token": "{{local_token}}",_10 "expires": 1673305329_10}
The local_token
value you receive in the response is required for authentication in the app's API calls, as explained in the following sections.
Once the app is installed and the local token is created, you can use the Catalog Images app resources through REST API or GraphQL API.
REST API
Two REST API endpoints are available to manage images using the Catalog Images app:
POST
Save imageDELETE
Delete image
Save image
To save an image in File Manager, use the request below. Send one image at a time and set the request body format to multipart/form-data
.
_10curl --location --request POST 'https://app.io.vtex.com/vtex.catalog-images/v0/{{accountName}}/{{workspace}}/images/save/{{fileName}}' \_10--header 'VtexIdclientAutCookie: {{token}}' \_10--form '=@"{{filePath}}"'
Replace the following values in your request:
Property | Location | Type | Description | Example |
---|---|---|---|---|
accountName | Path | String | Name of the VTEX account. | mystore |
workspace | Path | String | Name of the workspace where you want to upload the image. You can only upload images in the master workspace. | master |
fileName | Path | String | Name and extension of the image file. | product.png |
token | Header | - | Local token required for authentication. | - |
filePath | Request body | String | Full path of the file. | /C:/Images/product.png |
If an image with the same fileName
already exists, the response is Conflict (409)
, with the URL of the conflicting image in the response body.
Otherwise, the response is OK (200)
with the id
, slug
, and fullUrl
in the response body, as follows:
Response body example (200 OK):
_10{_10 "id": "special-offer.png",_10 "slug": "/assets/vtex.catalog-images/products/special-offer___782206cd73597a717ed67eba399167a6.png",_10 "fullUrl": "https://myvtexaccountname.vtexassets.com/assets/vtex.catalog-images/products/special-offer___782206cd73597a717ed67eba399167a6.png"_10}
Delete image
The following REST API route allows you to delete a Catalog image in File Manager:
_10curl --location -g --request DELETE 'https://app.io.vtex.com/vtex.catalog-images/v0/{{accountName}}/{{workspace}}/images/delete/{{fileName}}' \_10--header 'VtexIdclientAutCookie: {{token}}'
Replace the values as explained below:
Property | Location | Type | Description | Example |
---|---|---|---|---|
accountName | Path | String | Name of the VTEX account. | mystore |
workspace | Path | String | Name of the workspace where you want to delete the image. You can only delete images in the master workspace. | master |
fileName | Path | String | Name and extension of the image file. | product.png |
token | Header | - | Local token required for authentication. | - |
If the image exists and is successfully deleted, the response will be an empty body with the OK (200)
status code. If the image doesn't exist, the response is Not Found (404)
.
GraphQL API
The following mutations are available for Catalog images using the app's GraphQL API:
saveImage
Use the following mutation to save an image in File Manager using GraphQL:
Mutation:
_10saveImage(filename: String!, file: Upload!){_10 id_10 slug_10 fullUrl_10}
Response body example (200 OK):
_10{_10 "id": "special-offer.png",_10 "slug": "/assets/vtex.catalog-images/products/special-offer___782206cd73597a717ed67eba399167a6.png",_10 "fullUrl": "https://myvtexaccountname.vtexassets.com/assets/vtex.catalog-images/products/special-offer___782206cd73597a717ed67eba399167a6.png"_10}
If an image with the same name already exists in File Manager, the response includes an array of errors, including CONFLICT_FILE_ERROR
.
Response body example (409 Conflict):
_13"errors": [_13 {_13 [...]_13 "extensions": {_13 "code": "CONFLICT_FILE_ERROR",_13 "data": {_13 "statusCode": 409,_13 "file": "https://sandboxintegracao.vtexassets.com/assets/vtex.catalog-images/src/car22___aabd8ae86160533e7090c024ac004bc6.jpg"_13 }_13 },_13 [...]_13 }_13]
deleteImage
Use the following mutation to delete an image in File Manager using GraphQL:
Mutation:
_10deleteImage(filename: String!){_10 statusCode_10}
Response body example (200 OK):
_10{_10 "statusCode": "Ok"_10}
If the image doesn't exist, the statusCode
value in the response is NotFound
.