Uploading files through the Web API

• 1 minute to read

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.

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

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

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