File Uploads

N8N Chat UI allows users to upload files and images directly from the chat widget. These files are then sent to your n8n workflow for further processing.

Enabling File Uploads

• While customizing your widget, enable the file upload option in the widget settings.
• You can configure allowed file types, maximum file size, and the maximum number of files per message.

How File Uploads Work

When a user uploads files or images through the chat widget:

• Each uploaded file appears as a preview in the chat window.
• Files, along with the message and metadata, are sent to your n8n webhook.

Example:

How Uploaded Files Are Received in n8n

When files are uploaded, your n8n workflow receives a payload containing:

• The metadata field (as a stringified JSON object)
• The user's message (chatInput)
• The files array, with one object per uploaded file

Important:

Files are sent in binary format.
You can view and download them in the Binary tab in n8n.
See the screenshots below for how files and their metadata appear in n8n:

JSON Output Example:

Binary Output Example:

Each file object includes:

• fileName
• fileSize
• fileType
• mimeType
• fileExtension
• binaryKey (the key to access the binary data in n8n)

Video Tutorial

For a step-by-step walkthrough—including setup, workflow configuration, and best practices—watch the detailed YouTube video below:

This video covers:

• How to enable and use file uploads in your chat widget
• How files are received and processed in your n8n workflow
• Tips for handling different file types

You’ll also find a downloadable workflow template and additional resources in the video description.

Summary

• Enable file uploads from the widget customization panel.
• Uploaded files are sent as binary data to n8n and can be accessed in the Binary tab.
• The metadata field is stringified—always parse it before use.
• You can view, download, and process files in your n8n workflow as needed.