---
title: "Uploading files through the Web API | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/preflight/howto/upload-files/"
---

# Uploading files through the Web API

> The Preflight Tool already includes the upload interface. However, if you still need uploading files externally, you can do it as described here.

First, configure the `preflight` widget. You need to disable starting from the uploader.

```json
{
    "vars": {
        "fileList": [],
        "backendUrl": "<URL to your preflight backend>"
    },
    "widgets": [{
        "name": "preflight",
        "type": "preflight",
        "params": {
            "files": "{{ vars.fileList }}",
            "config": {
                "backendUrl": "{{vars.backendUrl}}",
                "startFromUploader": false,
                ... // Other settings.
    },
    "steps": [
        ...
    ]
}
```

Use a FORM element to select files and send a `multipart/form-data` POST request.

```html
<form action="/server/api/files/upload" method="post" enctype="multipart/form-data">
    Select PDF to upload:
    <input type="file" name="file" id="file" accept="application/pdf">
    <input type="submit" value="Upload Image" name="submit">
</form>
<div class="editor-parent" id="editor-parent"></div>
```

The **api/files/upload** request returns a list of files, which you need to pass to the Preflight Tool as follows:

1.  Get a reference to the editor instance which is returned from the `renderEditor` method.
2.  This instance has the `scopeInternal` method which returns the same object as you can use inside dynamic config expressions. For example, if you give your preflight widget name `My-Preflight-Tool`, you need to access it as `$["My-Preflight-Tool"]`. In this example, the widget name is `preflight`, and you can access it using both dot and square bracket syntax.
3.  The preflight widget supports the `setFiles` method which accepts an array of file names from the Preflight backend.

```html
<script type="module">

    // Initialize the Preflight Tool.
    var editorInstance = null;

    document.addEventListener('DOMContentLoaded', async () => {

        // Define init parameters.
        // ...
        config.vars.backendUrl = "/server";

        // Instantiate an editor.
        const ecommerce = await driver.init(product, editor, config, settings, null, quantity, user);
        editorInstance = await ecommerce.products.current.renderEditor(document.getElementById("editor-parent"));

    });

    // Here goes the upload handling code.
    document.addEventListener("DOMContentLoaded", () => {

        // Send a POST request containing files to https://<preflight backend>/api/files/upload
        document.querySelector("form").addEventListener("submit", async e => {
            e.preventDefault();
            let response = await fetch("/server/api/files/upload", {
                body: new FormData(e.currentTarget),
                method: "post",
            });

            // The response contains an array of internal file identifiers on the back end.
            // For example, ['35e8d7f6-c075-4540-8f89-aa7255ab8ed5.pdf'].
            let result = await response.json();
            console.log(result);

            // Pass these names to the UI Framework. To do it, you need to get an access to the
            // preflight widget and call the setFiles method as follows: 
            editorInstance.scopeInternal.$.preflight.setFiles(result);

        });
    });
</script>
```

For more details, refer to the [Web API Reference](https://customerscanvas.com/docs/on-premises/preflight/web-api/upload.md).