---
title: "Design and Mockup Files"
canonical: https://customerscanvas.com/docs/cc4/file-manipulation-api.htm
archived: true
applies_to:
  - product: "Customer's Canvas On-Premises"
  - product: "Design Editor"
    versions: ["4.4.25", "4.x (may differ)"]
---

**You’re viewing outdated documentation.** [View the latest Customer’s Canvas On-Premises documentation](https://customerscanvas.com/docs/on-premises/).

# Design and Mockup Files

**Applies to:** Customer's Canvas On-Premises; Design Editor 4.4.25, 4.x (may differ) · **Archived documentation**
 
Customer's Canvas provides a Web API to manipulate design and mockup files for the host web application. This API works based on HTTPS requests and is handled by the ProductTemplates controller (`~/api/ProductTemplates`). It has the following functionality:
 
|  Function |  Request type |  URL |  Description |
| --- | --- | --- | --- |
   |  Upload a file |  POST |  `~/api/ProductTemplates/designs|mockups/folder` |  Uploads a file to the `\designs\` or `\mockups\` folder or their subfolders. If a file with a given name already exists, the name of the uploaded file is changed by adding `_1`, `_2`, etc. to it. |
 |  Download a file |  GET |  `~/api/ProductTemplates/designs|mockups/{id}` |  Downloads a file with the given ID. |
 |  Delete a file |  DELETE |  `~/api/ProductTemplates/designs|mockups/{id}` |  Deletes a file with the given ID. |
 |  Replace a file |  PUT |  `~/api/ProductTemplates/designs|mockups/{id}` |  Replaces a file with the given ID. If there is no such file, uploads the given one. |
 |  Get file list |  GET |  `~/api/ProductTemplates/designs|mockups` |  Returns an array of file identifiers in the `\designs\` or `\mockups\` folder. |
 |  Get an image preview |  GET |  `~/api/ProductTemplates/designs|mockups/{id}?width=int&height=int&mode=File|Design` |  Returns an image preview generated with the given size (in pixels). The **mode** is an optional parameter; the default value is `File`. |
 |  Move or copy a file |  PATCH |  `~/api/ProductTemplates/designs|mockups/{id}?path=<newPath>&name=<newName>&copy=boolean&overwrite=boolean` |  Moves or copies a file, depending on the **copy** parameter. If **overwrite** is `false` and a file with a given **name** already exists, then the new file name is changed by adding `_1`, `_2`, etc. to it. **copy** and **overwrite** are optional parameters; they are `false` by default. |
 
Here, **id** is the file identifier you normally use when loading a file into the web-to-print editor. The identifier consists of a file name without an extension and, optionally, a path to the file relative to the `\designs\` or `\mockups\` folders. For example:
 
- `BusinessCard` is the **id** for the `\designs\BusinessCard.psd` file.
- `photobook\photobook_page_2` is the **id** for the `\designs\photobook\photobook_page_2.psd` file.

The **mode** parameter allows you to specify in what way Customer's Canvas generates design previews. If this parameter is `File` and there is the MergedImageFrame in your PSD file, then Customer's Canvas returns this preview. Otherwise, the editor provides previews through rendering the designs.
 
When moving or copying files, you can omit **path**, **name**, or both parameters. If the **path** is not specified, then the destination folder is `\designs\` or `\mockups\`. If you omit the **name** parameter, the resulting file takes the same name as **id**.
 
**Important** 
The snippets below define the [API security key](https://customerscanvas.com/docs/cc4/webapi.htm.md) in JavaScript code. It could be highly insecure if they are run on a public site. However, you can use them this way in your admin panel, or just for demonstration purposes.
 
## Uploading Design
  
The following snippet displays a form that allows for selecting a file and a script that uploads the selected file to the `\designs\` folder on the server.
 
```html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.js">
    </script>
    <script language="javascript">
        var baseUrl = "https://example.com/api/ProductTemplates";

        var apiKey = "UniqueSecurityKey";

        var uploadTemplate = function(root, folder) {
            var data = new FormData(document.getElementById(root + "_upload"));

            $.ajax({
                url: baseUrl + "/" + root + "/" + encodeURIComponent(folder),
                type: "POST",
                headers: { "X-CustomersCanvasAPIKey": apiKey },
                data: data,
                processData: false,
                contentType: false
            })
            .done(function(d) {
                console.log("File is uploaded successfully. Its id is " + d);
            })
            .fail(function() {
                console.error("Upload failed.");
            });
        }

    </script>
</head>
<body>
    <div id="designs"></div>
    <hr />
    <h3>Upload a Design</h3>
    Folder: <input type="text" id="designfolder" />
    <form id="designs_upload" enctype="multipart/form-data">
        File: <input type="file" name="file" />
    </form>
    <input type="button" value="Upload Desing" onclick="uploadTemplate('designs', document.getElementById('designfolder').value)" />
</body>
</html>
```
 
## Sample Requests
  
Here are several snippets, one per each function provided by the ProductTemplates controller, illustrating how to form proper requests.
 
#### Displaying a 250x250 pixels business card design preview
 
There is no need to form a request in JavaScript to get a design preview. You can do it by triggering the URL as follows:
 
```html
<img src="https://example.com/api/ProductTemplates/designs/businesscard2_side1?width=250&height=250" />
```
 
The other functionality requires properly formed requests. The examples in this topic use **jQuery.ajax** and the following variables:
 
```
//baseUrl is the absolute URL to the ProductTemplates controller
var baseUrl = "https://example.com/api/ProductTemplates";

//apiKey is your unique application key defined in the web.config file;
//this key allows file operations (upload, download, delete, replace)
var apiKey = "UniqueSecurityKey";
```
 
#### Getting a list of files in the \designs\ folder
 
```
$.ajax({ 
    type: "GET",
    url: baseUrl +"/designs"
}).done(function(d) {
    //outputs the list of files in the /designs/ folder to the console
    d.forEach(function(id) {
        var link = "/designs/" + id + ".psd";
        console.log(link);
    });
});
```
 
#### Deleting a page from the photobook
 
```
$.ajax({ 
    type: "DELETE",
    headers:  { "X-CustomersCanvasAPIKey": apiKey },
    url: baseUrl +"/designs/photobook/photobook_page_2"
})
```
 
#### Uploading a mockup
 
```
$.ajax({ 
    type: "POST",
    url: baseUrl +"/mockups",
    headers:  { "X-CustomersCanvasAPIKey": apiKey },
    data: data, //a file to upload
    processData: false,
    contentType: false 
}).done(function(d) {
    //outputs the ID of the uploaded mockup to the console
    console.log(d);
});
```
 
#### Downloading a design template
 
```
$.ajax({ 
    type: "GET",
    url: baseUrl +"/designs/bbqinvitation",
    headers:  { "X-CustomersCanvasAPIKey": apiKey }
})
```
 
#### Replacing a page in the photobook
 
```
$.ajax({ 
    type: "PUT",
    url: baseUrl +"/designs/photobook/photobook_page_2",
    headers:  { "X-CustomersCanvasAPIKey": apiKey },
    data: data, //a file to replace the old one with
    processData: false,
    contentType: false 
})
```
 
## See Also
  
### Manual
 
- [Web API](https://customerscanvas.com/docs/cc4/webapi.htm.md)