Designs and Mockups

  • 6 minutes to read

Design Editor provides a Web API to manipulate design and mockup files. 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/{id} 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}?downloadArchiveWithLinks=boolean&ext=string Downloads a file with the given ID. The downloadArchiveWithLinks parameter enables file archiving if true. This archive also contains linked images referenced from the IDML template. This parameter is false by default.
Delete a subfolder DELETE ~/api/ProductTemplates/designs|mockups/{id} Deletes a subfolder in the \designs\ or \mockups\ folder by the given ID. If there is no such a subfolder, this request will try to delete a file with the given ID (for more details, see the following endpoint).
Delete a file DELETE ~/api/ProductTemplates/designs|mockups/{id}?ext=string Deletes a file with the given ID. If no file extension is provided, this request will try to delete a file in the following order: .psd, .png, .jpeg, .jpg, .svg, .pdf, .bmp, .tiff, .tif, .gif, .eps, and .ai. For designs, this request will try to delete .idml and .json files first.
Replace a file PUT ~/api/ProductTemplates/designs|mockups/{id}?ext=string Replaces a file with the given ID. If there is no such file, it uploads the given one.
Get a file list GET ~/api/ProductTemplates/designs|mockups?subfolder=string&ext=boolean Returns an array of file identifiers in the \designs\ or \mockups\ folder. When you specify the subfolder parameter, then only files from this subfolder are listed. If ext is true, then file extensions are returned in the response.
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&moveWithLinks=boolean&ext=string 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. If moveWithLinks is true, this method moves linked images with the referencing IDML template. copy, overwrite, and moveWithLinks are optional parameters; they are false by default.
Get a design info GET ~/api/ProductTemplates/DesignInfo/{id} Returns a list of spreads from IDML templates. A spread contains a list of pages and a list of items.

Headers

In the request header, this controller requires X-CustomersCanvasAPIKey - a unique API key defined in the AppSettings.config.

URL Parameters

The ProductTemplates controller supports the following parameters:

  • id is the required parameter representing a file identifier. This identifier is the same one you normally use when loading a file into the Design Editor. It 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 \assets\designs\BusinessCard.psd file.
    • photobook\photobook_page_2 is the id for the \assets\designs\photobook\photobook_page_2.psd file.
  • downloadArchiveWithLinks enables archiving for the downloaded file. The default value is false.
  • height is the height of a file preview in pixels. This optional parameter is 500 by default.
  • mode allows you to specify in what way Design Editor generates design previews. If this parameter is File and there is a MergedImageFrame in your PSD file, then Design Editor returns this preview. Otherwise, the editor provides previews by rendering the designs. The default value is File.
  • moveWithLinks moves linked images with the referencing IDML template. The default value is false.
  • subfolder specifies a single subfolder from which you want to get a list of either designs or mockups. By default, all files with valid extensions are listed (.idml, .psd, .png, .jpeg, .jpg, .svg, .pdf, .bmp, .tiff, .tif, .gif, .eps, and .ai).
  • ext specifies a file extension.
  • width is the width of a file preview in pixels. This optional parameter is 500 by default.

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 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.

Sample of Uploading Designs

This sample displays a form that allows for selecting a file and a script that uploads this file to the \designs\ folder on the server.

<!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/cc/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,
                success: function(d) {
                    console.log("The " + d + " file was uploaded successfully.");
                },
                error: 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>

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:

<img src="https://example.com/cc/api/ProductTemplates/designs/businesscard?width=250&height=250" />

The other functionality requires properly formed requests. The examples in this topic use jQuery.ajax and the following variables:

// 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

$.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);
    });
});

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:

[
    {
        "id": "businesscard2_side1",
        "ext": "psd"
    },
    {
        "id": "businesscard2_side2",
        "ext": "psd"
    }
]

Deleting a page from the photobook

$.ajax({
    type: "DELETE",
    headers:  { "X-CustomersCanvasAPIKey": apiKey },
    url: baseUrl +"/designs/photobook/photobook_page_2"
})

Deleting the whole folder photobook

$.ajax({
    type: "DELETE",
    headers:  { "X-CustomersCanvasAPIKey": apiKey },
    url: baseUrl +"/designs/photobook"
})

Uploading a mockup

$.ajax({
    type: "POST",
    url: baseUrl +"/mockups",
    headers:  { "X-CustomersCanvasAPIKey": apiKey },
    data: data, // A file to upload.
    processData: false,
    contentType: false,
    success: function(d) {
        // Outputs the ID of the uploaded mockup to the console.
        console.log(d);
    }
});

The response contains the identifier of the uploaded file.

Downloading a design template

$.ajax({
    type: "GET",
    url: baseUrl +"/designs/bbqinvitation",
    headers:  { "X-CustomersCanvasAPIKey": apiKey},
    xhrFields: { responseType: "blob" },
    success: function (data) {
        var a = document.createElement("a");
        var url = window.URL.createObjectURL(data);
        a.href = url;
        a.download = 'bbqinvitation.psd';
        document.body.append(a);
        a.click();
        a.remove();
    }
});

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
})
Was this page helpful?
Back to top Copyright © 2001–2024 Aurigma, Inc. All rights reserved.