Most file upload components force you to work around a built-in UI. FileInput doesn't have one. Instead, it exposes five state slots — Idle, Dragging, Uploading, Success, and Error — where you connect your own designed frames. Your component, your brand, your pixels. The logic just works underneath.
-------------------------------------------------------------
FileInput connects directly to the storage provider of your choice — no server, no middleware, no DevOps:
⚡ Public (tmpfiles.org) — Get uploading in seconds during prototyping. Files auto-delete after 1 hour so you're never cluttering storage.
Cloudinary — The industry favourite for media. Paste your cloud name and upload preset and you're done.
Supabase — Full Postgres + storage in one. Paste your project URL, anon key, and bucket name.
Google Drive — Upload files straight to a Drive folder via a Google Apps Script endpoint. Great for client-facing tools and internal dashboards.
Cloudflare R2 — S3-compatible, globally distributed, and priced with no egress fees. Point it at your Worker URL.
Uploadcare — Powerful CDN with built-in transformations. Add your public key and go.
Switching providers is a single dropdown change in the Framer panel. No code edits required.
---------------------------------------------------
FileInput isn't a prototype toy — it's production-ready out of the box:
Drag and drop with live state feedback on your designed frames
Real-time upload progress tracked per file via XHR, reflected instantly in your UI
File type filtering — toggle allowed types (JPG, PDF, MP4, ZIP, and 30+ more) from the panel. No typing MIME strings.
File size limits — set a max in MB with a simple slider
Multi-file uploads — enable with one toggle. Each file tracked independently.
Validation errors surfaced clearly before any upload attempt
Native form integration — a hidden input carries uploaded URLs straight into Framer's form submission payload. No custom wiring.
----------------------------------------------------
Apply the built-in overrides to any text layer on your canvas to display live upload data:
File name and formatted file size
Upload progress as a percentage
Error messages (validation and network)
The final uploaded URL
A progress bar override that animates width automatically
A variant switcher that flips your component's variant to match the upload state
Your text layers stay fully styled. The overrides only replace the content.
--------------------------------------------------------
Drop FileInput onto your canvas. A placeholder guides you until slots are connected.
Connect your designed frames to the Idle, Dragging, Uploading, Success, and Error slots in the right panel.
Choose a provider from the dropdown, paste in your credentials, and publish.
That's it. No npm. No custom code. No reading documentation for an hour.
Need more detail? The full documentation is here → — covering every provider setup, override usage, form integration, and common troubleshooting scenarios.
-------------------------------------------------------
Freelancers and agencies building client portals, intake forms, and onboarding flows
SaaS founders who need a polished upload experience without building one from scratch
No-code builders who want real cloud storage without touching a line of backend code
Designers who refuse to compromise on how their upload UI looks
---------------------------------------------------
Full FileInput component with all upload logic
6 preconfigured cloud provider integrations
7 text and variant overrides ready to apply
30+ file type toggles in the property panel
Framer-native form field support
Canvas placeholder for editor guidance
Stop stitching together upload workarounds. FileInput ships the hard part — you just design around it.
Nitin Sangwan
