---
title: "Typical Proofing Workflow"
canonical: https://customerscanvas.com/docs/cc4/typical-proofing-workflow.htm
archived: true
applies_to:
  - product: "Customer's Canvas On-Premises"
  - product: "Preflight Tool"
---

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

# Typical Proofing Workflow

**Applies to:** Customer's Canvas On-Premises; Preflight Tool · **Archived documentation**
 
The workflow of Customer's Canvas Proofing Tool runs through the following steps:
 
1. The design upload
2. The preflight check
3. Rendering

## The Design Upload
  
To start working with the preflight tool, upload design files through the **/api/upload** HTTP request. This method gets user files, saves them with new unique names on your server, and returns these server-side names within a response.
 
|  URL |  `toolurl/api/upload` |
| --- | --- |
 |  Type |  POST |
 |  Content-Type |  multipart/form-data |
 |  Request data |  Design files |
 |  Response |  The array of uploaded file names as they are stored on the server. |
 
Here, **toolurl** is the path to your Visual Proofing Tool instance. You can pass the design files through a standard HTML form.
 
```html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="/Resources/VisualProofingTool/VisualProofingTool.js">
    </script>
</head>

<body>
    <form id="inputForm" name="inputForm" method="post" enctype="multipart/form-data" action="/api/upload">
    <div>
        <input name="theDesign" type="file" />
    </div>
    <div>
        <input type="submit" value="Submit" />
    </div>
    </form>

    <script type="text/javascript">
    var form = document.getElementById("inputForm");
    form.addEventListener("submit", function(e) {
        var xhr = new XMLHttpRequest();
            xhr.open("POST", form.getAttribute("action"));
            xhr.send(new FormData(form));
            xhr.onreadystatechange = function() {
                if (xhr.readyState !== 4 || xhr.status !== 200)
                    return;

                var designFiles = JSON.parse(xhr.responseText);
            }
    }
    </script>
</body>
</html>
```
 
## The Quality Meter
  
When users manipulate their designs, Visual Proofing Tool validates resolution of print designs. If the resulting image size is less than the DPI parameter requires, then the following warning appears at the bottom of the editor: **"Image resolution is too low for the print size!"**
 
Also, you can retrieve the size and resolution of the uploaded design file via the **/api/imageinfo** request.
 
|  URL |  `toolurl/api/imageinfo/filename` |
| --- | --- |
 |  Type |  GET |
 |  Response |  The image size in pixels and DPI resolution for the specified file. |
 
Here, **filename** is the file name returned by the **/api/upload** method. **toolurl** is the path to your Visual Proofing Tool instance. The response is a JSON object containing the following properties.
 
```
{
    width: number;
    height: number;
    dpi: number;
}
```
 
## Rendering the Design
  
When the user has finished manipulating the design, they can render to hi-res through the **finish** method.
 
```
finish(): Promise<{proofUrls: string[], hiResUrl: string}>
```
 
This method returns links to both proof images and the hi-resolution output. You can display the proof images on the stage where the user validates the result.
 
|  Name |  Data type |  Description |
| --- | --- | --- |
   |  proofUrls |  array of strings |  An array of links to proof images. |
 |  hiResUrl |  string |  The URL of the hi-res output. |
 
You can retrieve these links the following way.
 
```
CustomersCanvas.VisualProofing.Tool.init(...)
.then(function(tool){
    tool.finish()
        .then(function (finishData) {
            console.log(finishData.hiResUrl);
            console.log(finishData.proofUrls);
        })
        .catch(function(exception) {
            console.error(exception);
        });
});
```
 
## See Also
  
### Manual
 
- [The Quick Start](https://customerscanvas.com/docs/cc4/preflight-quick-start.htm.md)
- [Visual Proofing Tool Configuration](https://customerscanvas.com/docs/cc4/visual-proofing-tool-configuration.htm.md)