https://framer.com/m/Fileuploaderuppy-ZJ3prh.js

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

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.

Enhancements27 controlsdrop arearesumable uploads

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. maxFileSize 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. stallTimeout abandons an upload that stops making progress, errorReportUrl posts failures to a webhook of your own, and showErrorDetails decides how much of the reason the reader sees.

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. In multi-file mode it is comma-separated.
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.
maxFileSize	number	Largest file that will be taken, in MB.
stallTimeout	number	Seconds without progress before an upload is abandoned. 0 turns the watchdog off.
errorReportUrl	string	Optional. Failures are POSTed here as JSON via sendBeacon, so there is no CORS preflight.
showErrorDetails	boolean	Whether the reader sees why a file was refused, or just that it was.
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.
customFont	boolean	Off uses the theme's --font-family and Callout token; on reveals font. Note: its panel label is Font, and its DSL key is $control__font.
font	font	The face, only when customFont is on.
textColor / iconColor	color	Ink and icon. Empty resolves to --field-text and --field-text-secondary.
background	color	Panel fill. Empty resolves to --field-background.
errorColor	color	Colour a refusal is written in. Empty resolves to --warning-color.
border	border	Empty resolves to --borderwidth-normal dashed --border-color.
radiusSize	enum	none · tiny · small · normal · large · circle · custom, from the theme --radius-* scale.
customRadius	radius	Used only when radiusSize is custom.
paddingSize	enum	none · tiny · xs · small · normal · large · xl · custom, from the theme --padding-* scale.
customPadding	padding	Used only when paddingSize is custom.
shadow	shadow	Empty is no shadow.
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. In multi-file mode it is comma-separated.
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.
maxFileSize	number	Largest file that will be taken, in MB.
stallTimeout	number	Seconds without progress before an upload is abandoned. 0 turns the watchdog off.
errorReportUrl	string	Optional. Failures are POSTed here as JSON via sendBeacon, so there is no CORS preflight.
showErrorDetails	boolean	Whether the reader sees why a file was refused, or just that it was.
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.
customFont	boolean	Off uses the theme's --font-family and Callout token; on reveals font. Note: its panel label is Font, and its DSL key is $control__font.
font	font	The face, only when customFont is on.
textColor / iconColor	color	Ink and icon. Empty resolves to --field-text and --field-text-secondary.
background	color	Panel fill. Empty resolves to --field-background.
errorColor	color	Colour a refusal is written in. Empty resolves to --warning-color.
border	border	Empty resolves to --borderwidth-normal dashed --border-color.
radiusSize	enum	none · tiny · small · normal · large · circle · custom, from the theme --radius-* scale.
customRadius	radius	Used only when radiusSize is custom.
paddingSize	enum	none · tiny · xs · small · normal · large · xl · custom, from the theme --padding-* scale.
customPadding	padding	Used only when paddingSize is custom.
shadow	shadow	Empty is no shadow.
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.