Folder:
```
## Example Requests
Here are several examples (one per each function provided by the `ProductTemplates` controller) illustrating how to form proper requests.
### Displaying a 250x250 pixels design preview
There is no need to form a request in JavaScript to get a design preview. For example, you can preview a `businesscard` design by using the following URL:
```js
```
The other functionality requires properly formed requests. The examples in this topic use the following variables:
```js
// The absolute URL to the ProductTemplates controller.
var baseUrl = "https://example.com/cc/api/ProductTemplates";
// A unique application key defined in the AppSettings.config file;
// this key allows file operations (upload, download, delete, or replace).
var apiKey = "UniqueSecurityKey";
```
### Getting a list of all files in the \\assets\\designs\\ folder
```js
const getFileList = async () => {
try {
const response = await fetch(`${baseUrl}/designs`);
if (!response.ok) {
throw new Error(`Error: ${response.status}`);
}
const data = await response.json();
//outputs the file list of files in the /designs/ folder to the console.
data.forEach((id) => {
const link = `/designs/${id}.psd`;
console.log(link);
});
} catch (error) {
console.error("Failed to get a file list:", error.message);
}
};
```
If the `ext` parameter is omitted or `false`, then the response contains an array of strings representing file identifiers. Otherwise, the array elements contain identifiers and extensions in the following format:
```json title="Response with a file list"
[
{
"id": "businesscard2_side1",
"ext": "psd"
},
{
"id": "businesscard2_side2",
"ext": "psd"
}
]
```
### Deleting a page from the photobook
```js
const deleteFile = async () => {
try {
const response = await fetch(`${baseUrl}/designs/photobook/photobook_page_2`, {
method: "DELETE",
headers: {
"X-CustomersCanvasAPIKey": apiKey
}
});
if (!response.ok) {
// Check for 4xx/5xx status.
throw new Error(`Server error: ${response.status}`);
}
console.log("The file was deleted successfully.");
} catch (error) {
console.error("Failed to delete the file:", error.message);
}
};
```
### Deleting the whole folder photobook
```js
const deleteFolder = async () => {
try {
const response = await fetch(`${baseUrl}/designs/photobook`, {
method: "DELETE",
headers: {
"X-CustomersCanvasAPIKey": apiKey
}
});
if (!response.ok) {
// Check for 4xx/5xx status.
throw new Error(`Server error: ${response.status}`);
}
console.log("The folder was deleted successfully.");
} catch (error) {
console.error("Failed to delete the folder:", error.message);
}
};
```
### Uploading a mockup
```js
const uploadMockup = async (data) => {
try {
const response = await fetch(`${baseUrl}/mockups`, {
method: "POST",
headers: {
"X-CustomersCanvasAPIKey": apiKey
},
body: data
});
if (!response.ok) {
// Check for 4xx/5xx status.
throw new Error(`Server error: ${response.status}`);
}
const result = await response.json();
// Outputs the ID of the uploaded mockup to the console.
console.log("Mockup uploaded successfully. ID:", result);
} catch (error) {
console.error("Failed to upload the mockup:", error.message);
}
};
```
The response contains the identifier of the uploaded file.
### Downloading a design template
```js
const downloadDesign = async () => {
try {
const response = await fetch(`${baseUrl}/designs/bbqinvitation`, {
method: "GET",
headers: {
"X-CustomersCanvasAPIKey": apiKey
}
});
if (!response.ok) {
// Check for 4xx/5xx status.
throw new Error(`Server error: ${response.status}`);
}
// Convert the response to a Blob.
const data = await response.blob();
// Create a temporary link to trigger the download.
const a = document.createElement("a");
const url = window.URL.createObjectURL(data);
a.href = url;
a.download = 'bbqinvitation.psd';
document.body.append(a);
a.click();
// Clean up: remove the link and revoke the object URL.
a.remove();
window.URL.revokeObjectURL(url);
console.log("The file download has started.");
} catch (error) {
console.error("Failed to download the design:", error.message);
}
};
```
### Replacing a page in the photobook
```js
const replaceFile = async (data) => {
try {
const response = await fetch(`${baseUrl}/designs/photobook/photobook_page_2`, {
method: "PUT",
headers: {
"X-CustomersCanvasAPIKey": apiKey
},
body: data
});
if (!response.ok) {
// Check for 4xx/5xx status.
throw new Error(`Server error: ${response.status}`);
}
console.log("The file was replaced successfully.");
} catch (error) {
console.error("Failed to replace the file:", error.message);
}
};
```