--- title: "File Input — Framer component · Best of Framer" description: "$9.00 · Framer component · by Nitin Sangwan · Forms. File Upload Component for Framer" canonical: "https://framer.elliotli.dev/component/file-input" --- [Home](/)/[Components](/components)/[Forms](/components/category/forms)/File Input # File Input File Upload Component for Framer [View on Framer](https://framer.com/marketplace/components/file-input/?via=elliot-li) ![File Input preview image 1](https://framer.elliotli.dev/og/component/file-input/a462b611eb6d84d2/1600x1200.jpg) ## Summary File Upload Component for Framer ## Description ## Bring your own design 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. \------------------------------------------------------------- ## 6 cloud providers. Zero backend required. FileInput connects directly to the storage provider of your choice — no server, no middleware, no DevOps: - **⚡ Public (**[**tmpfiles.org**](http://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. \--------------------------------------------------- ## Built for real products 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. \---------------------------------------------------- ## Live text overrides — no code 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. \-------------------------------------------------------- ## How to set up in 3 steps 1. **Drop FileInput onto your canvas.** A placeholder guides you until slots are connected. 2. **Connect your designed frames** to the Idle, Dragging, Uploading, Success, and Error slots in the right panel. 3. **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 →**](https://file-input-guide.netlify.app/) — covering every provider setup, override usage, form integration, and common troubleshooting scenarios. \------------------------------------------------------- ## Who it's for - **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 \--------------------------------------------------- ## What's included - 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 [**Live Preview**](https://file-input.framer.website/) **·** [**Documentation**](https://file-input-guide.netlify.app/) _Stop stitching together upload workarounds. FileInput ships the hard part — you just design around it._ ## Rank history [How rankings work →](/terms#rankings) - All · #1749 ## Details - **Author**: Nitin Sangwan - **Price**: $9.00 - **Published**: 2026-05-05 - **Updated**: 2026-05-05 - **Added**: 2026-04-20 - **Categories**: Forms ## More across types - [Wallble: Guest Book & Wall of Love](/plugin/wallble-guest-book-wall-of-love) — Wallble · Free — Guest book & Wall of Love ## More like this - [Stay Booking Pro](/component/stay-booking-pro) — Design Foundry · $10 — Stay Planner with Dynamic Pricing - [Postcode Checker](/component/postcode-checker) — Sean Weekes · $15 — Do we cover your area? (UK - [Property Calculators](/component/property-calculators) — Sean Weekes · $12 — UK Stamp Duty, mortgage and yield - [UTM Lead Capture](/component/utm-lead-capture) — Sean Weekes · $9 — See where every lead came from