View as Markdown
You’re viewing outdated documentation. View the latest Customer’s Canvas On-Premises documentation.

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

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

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

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

Uploading a mockup

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

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

Replacing a page in the photobook

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