Skip to main content

Upload images to Webflow via API as a reusable sub-workflow

Workflow preview

Workflow preview
100%
Upload images to Webflow via API as a reusable sub-workflow preview
Open on n8n.io

1. Workflow Overview

Uploading an image to Webflow's Asset Manager through the API is surprisingly complex. It requires computing an MD5 hash, announcing the file to Webflow, then uploading the binary to Amazon S3 with...

Best for

  • File Management automation workflows
  • intermediate n8n builders looking for reusable templates

Tools used

n8n-nodes-base.httprequest, n8n-nodes-base.crypto, n8n-nodes-base.executeworkflowtrigger, n8n-nodes-base.set, n8n-nodes-base.stickynote

Source and attribution

This workflow is cataloged by N8N Workflows and links back to its original n8n.io source page by Oliver Engel.

Original n8n.io source

1.1 Workflow description

Title
Upload images to Webflow via API as a reusable sub-workflow
Workflow name
Upload images to Webflow via API as a reusable sub-workflow

Uploading an image to Webflow's Asset Manager through the API is surprisingly complex. It requires computing an MD5 hash, announcing the file to Webflow, then uploading the binary to Amazon S3 with specific headers. This template wraps that entire process into a clean, reusable sub-workflow you can call from any main workflow.

How it works

  • Sub-workflow trigger receives imageData (binary), fileName, and wfSiteId.
  • MD5 hash computation generates the file hash that Webflow's API requires.
  • First HTTP node (POST to Webflow's /v2/sites/:site_id/assets) announces the file and returns an S3 upload URL along with required upload details (credentials, policy, signature).
  • Second HTTP node (POST to the S3 upload URL) sends the binary file as a multipart form request using the upload details from the previous step.
  • Set node extracts and returns originalFileName, fileId, and assetUrl to the calling workflow.

How to use

  1. Import this template as a workflow in your n8n instance.
  2. Set up Webflow credentials: Create a Bearer Auth credential with your Webflow API token. The token must have the assets:write scope.
  3. Call this workflow as a sub-workflow from your main workflow using the Execute Workflow node.
  4. Provide the required inputs:
  • imageData: The binary image data
  • fileName: File name including extension (max 100 characters)
  • wfSiteId: Your Webflow site ID
  1. Use the output: The sub-workflow returns originalFileName, fileId, and assetUrl, which you can then use in subsequent steps (e.g., updating a CMS item, sending a notification, etc.).

Requirements

  • Webflow account with API access, Bearer Auth credential with assets:write scope

Notes & customization

  • Upload to a specific folder: Webflow's API accepts an optional parentFolder parameter in the first request. If you want to upload into a specific folder in the Asset Manager, add the folder ID to the body of the first HTTP node.
  • Other file types: While this template is designed for images, Webflow's Asset API may accept other file types (e.g., videos, PDFs). The upload mechanism is the same, so worth testing if your use case requires it.
  • CMS integration: A natural next step after uploading is attaching the asset to a CMS collection item. This is a single additional HTTP request in your main workflow using the returned assetUrl and the relevant collection/item IDs.
  • File name limit: Webflow requires file names under 100 characters including the extension. Consider adding validation in your calling workflow if file names come from user input.

1.2 Logical Blocks

This catalog entry is organized from the workflow JSON. The node-level section below shows the executable blocks available for review before importing the template.

2. Block-by-Block Analysis

Block 1 - Step B – Upload binary to S3

Type / Role
n8n-nodes-base.httpRequest - httpRequest
Config choices
Version 4.4

Block 2 - Crypto

Type / Role
n8n-nodes-base.crypto - crypto
Config choices
Version 2

Block 3 - ARGS

Type / Role
n8n-nodes-base.executeWorkflowTrigger - executeWorkflowTrigger
Config choices
Version 1.1

Block 4 - Step A – Announce asset in Webflow

Type / Role
n8n-nodes-base.httpRequest - httpRequest
Config choices
Version 4.4

Block 5 - RETURN

Type / Role
n8n-nodes-base.set - set
Config choices
Version 3.4

Block 6 - Sticky Note

Type / Role
n8n-nodes-base.stickyNote - stickyNote
Config choices
Version 1

Block 7 - Sticky Note1

Type / Role
n8n-nodes-base.stickyNote - stickyNote
Config choices
Version 1

Block 8 - Sticky Note2

Type / Role
n8n-nodes-base.stickyNote - stickyNote
Config choices
Version 1

Block 9 - Sticky Note3

Type / Role
n8n-nodes-base.stickyNote - stickyNote
Config choices
Version 1

3. Summary Table

Workflow Upload images to Webflow via API as a reusable sub-workflow
Complexity intermediate
Nodes 9
Categories File Management
Author Oliver Engel
Published 07 Apr 2026

4. Reproducing the Workflow from Scratch

  1. 1. Download the workflow JSON

    Use the JSON export at /data/workflows/14863/14863.json as the source template for this automation.

  2. 2. Import the template into n8n

    Open n8n, import the downloaded JSON, and review each node before activating the workflow.

  3. 3. Configure credentials and variables

    Replace placeholder credentials, API keys, webhook URLs, account IDs, and environment-specific values with your own settings.

  4. 4. Test with sample data

    Run the workflow manually or in a staging workspace, inspect node output, and confirm downstream systems receive the expected data.

  5. 5. Activate and monitor

    Enable the workflow only after testing, then monitor executions, errors, and rate limits during the first production runs.

5. General Notes & Resources

Review imported nodes carefully before activation. This catalog entry is intended to help you inspect the workflow structure, understand required services, and find related templates faster.

Node names, credentials, schedules, webhook paths, and external service limits may need adjustment for your workspace.

Frequently asked questions

What does Upload images to Webflow via API as a reusable sub-workflow do?

Uploading an image to Webflow's Asset Manager through the API is surprisingly complex. It requires computing an MD5 hash, announcing the file to Webflow, then uploading the binary to Amazon S3 with...

What do I need before importing this workflow?

Review the workflow JSON, configure any required credentials in n8n, and test the automation in a safe workspace before using it in production.

Can I customize this workflow?

Yes. Use the block-by-block analysis and the downloadable JSON to inspect each node, then adjust credentials, prompts, schedules, filters, or destinations for your File Management use case.