https://framer.com/m/Uploadfile-YsqDbu.js@9E1O8x3NpgmPvdI5JdSV

_ __ _ (_)___ ____/ /__ _____(_)___ _____ / / __ \ / __ / _ \/ ___/ / __ `/ __ \ / / /_/ / / /_/ / __(__ ) / /_/ / / / / /_/\____/ \__,_/\___/____/_/\__, /_/ /_/ /____/ __ _______ _______/ /____ ____ ___ / ___/ / / / ___/ __/ _ \/ __ `__ \ (__ ) /_/ (__ ) /_/ __/ / / / / / /____/\__, /____/\__/\___/_/ /_/ /_/ /____/

Hello, Design System
你好，设计系统
こんにちは、デザインシステム
안녕하세요, 디자인 시스템
Hola, Sistema de Diseño
Bonjour, Design System
Hallo, Designsystem
Olá, Sistema de Design
Привет, дизайн-система
مرحبًا، نظام التصميم

UI Text

io

The System

UI Basics

Enhancements

Io / Enhancements / FileUploadComponent

FileUploadComponent

FileUploadComponent gives a form a drop area that accepts files, turns away the wrong types and anything oversized, and shows the reader what they picked.

Enhancements12 controlsdrop areatype and size checks

Examples

Live specimens for every control the component exposes.

Default

Files can be dropped or chosen. The component checks type and size before accepting, then previews the result and fires onUploadComplete.

Drag & drop or click to browse: Max 10MB

What is accepted

allowAllFiles opens the gate to everything; turn it off and allowedTypes decides. maxFileSizeMB turns away anything larger, and multiple lets more than one file through at a time.

anything, 5 MB

Drag & drop or click to browse: Max 5MB

max 1 MB

Drag & drop or click to browse: Max 1MB

multiple files

Drag & drop or click to browse: Max 10MB · up to 10

States

required marks the field as mandatory in the surrounding form. successMessage is what the reader reads once a file is through, and showFilePreview decides whether they see it.

required

Drag & drop or click to browse: Max 10MB

no preview

Drag & drop or click to browse: Max 10MB

custom message

Drag & drop or click to browse: Max 10MB

Props

The controls exposed on the instance panel.

Prop	Type	Behaviour
n8nWebhookUrl	string	n8n webhook the file is posted to. The workflow must answer with JSON: { url, name?, fileId? }.
folderId	string	Sent to the workflow alongside the file. What it means is up to the n8n side.
fieldName	string	Name of the hidden input carrying the uploaded URL, so a native form can submit it.
required	boolean	Marks the field as mandatory in the surrounding form.
multiple	boolean	Allows more than one file.
maxFiles	number	Ceiling on how many, once multiple is on.
allowAllFiles	boolean	Accepts any type; turn off to use allowedTypes.
allowedTypes	array	Extensions that are accepted.
maxFileSizeMB	number	Largest file that will be taken.
successMessage	string	Shown once a file is through.
showFilePreview	boolean	Shows what was picked.
placeholder	string	The line the drop area reads before anything is chosen.
font	font	Type for the drop area. Leave it empty and the theme supplies it.
textColor / iconColor	color	Ink and icon inside the drop area.
background / border / radius / padding / shadow	style	Shape and fill of the drop area.
errorColor	color	Colour a refusal is written in.
onUploadComplete	event	Fires once a file has been accepted.

Prop	Type	Behaviour
n8nWebhookUrl	string	n8n webhook the file is posted to. The workflow must answer with JSON: { url, name?, fileId? }.
folderId	string	Sent to the workflow alongside the file. What it means is up to the n8n side.
fieldName	string	Name of the hidden input carrying the uploaded URL, so a native form can submit it.
required	boolean	Marks the field as mandatory in the surrounding form.
multiple	boolean	Allows more than one file.
maxFiles	number	Ceiling on how many, once multiple is on.
allowAllFiles	boolean	Accepts any type; turn off to use allowedTypes.
allowedTypes	array	Extensions that are accepted.
maxFileSizeMB	number	Largest file that will be taken.
successMessage	string	Shown once a file is through.
showFilePreview	boolean	Shows what was picked.
placeholder	string	The line the drop area reads before anything is chosen.
font	font	Type for the drop area. Leave it empty and the theme supplies it.
textColor / iconColor	color	Ink and icon inside the drop area.
background / border / radius / padding / shadow	style	Shape and fill of the drop area.
errorColor	color	Colour a refusal is written in.
onUploadComplete	event	Fires once a file has been accepted.

Usage

Guidance carried over from the component definition.

Reach for FileUploadComponent

A form needs an attachment as well as text fields.

The wrong type or an oversized file should be refused before submission.

Readers should see what they picked before sending it.

The reader should be told what is wrong before they try to submit.

Reach for something else

The file has to be stored somewhere — this hands it over, it does not host it.

You need a whole form — use SmartFormFields.

Uploads must resume or run in the background.

Io — Enhancements

Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.