5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T87c,

File Upload Box

A drag-and-drop / click-to-browse file upload field that drops straight into Framer's native Form component. Visitors can browse or drag a file in, watch it upload with a live progress bar, and the resulting file URL is automatically written into a hidden field so it's included with the rest of your form submission — no extra setup needed.

Where your files go

You choose the upload destination in the property panel:

Uploadcare (recommended for real projects) — Files are uploaded directly to your own Uploadcare account using your Public API Key. Every file that comes through the form will show up in your Uploadcare dashboard, where you can view, manage, download, or delete them at any time.

To set this up, grab your Public Key from your Uploadcare project and paste it into the Upload → Public Key field in the property panel. If your account was created after September 4, 2025, also add your CDN Subdomain (found under Project Settings → Delivery) so file links resolve correctly.

tmpfiles.org (public demo host) — A quick way to test the component without setting up an account. Files are sent to the free public service tmpfiles.org and are automatically deleted after about 1 hour. This is meant for prototyping only — don't use it for real visitor submissions or sensitive files, since nothing is stored permanently and anyone with the link can access the file during that hour.

Other features

Optional required-field validation tied into Framer's form submit
Multiple file support
File type and max size restrictions
Fully customizable colors, border style, fonts, and icons to match your design

5a:[["$","$L5d",null,{"post":{"id":"019f70ad-e876-7131-9165-ad1643fbc25d","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","slug":"deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","followed":false,"followsYou":false},"media":[],"resources":[{"id":"UjgNvfxpZuFKU8xHJPLH","resolved":true,"title":"File Upload Box","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"File Upload Box","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"A drag-and-drop / click-to-browse file upload field that drops straight into Framer's native Form component. Visitors can browse or drag a file in, watch it upload with a live progress bar, and the resulting file URL is automatically written into a hidden field so it's included with the rest of your form submission — no extra setup needed."}]},{"type":"paragraph","content":[{"type":"text","text":"Where your files go","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"You choose the upload destination in the property panel:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Uploadcare (recommended for real projects)","marks":[{"type":"bold"}]},{"type":"text","text":" — Files are uploaded directly to your own Uploadcare account using your "},{"type":"text","text":"Public API Key","marks":[{"type":"bold"}]},{"type":"text","text":". Every file that comes through the form will show up in your "},{"type":"text","text":"Uploadcare dashboard","marks":[{"type":"bold"}]},{"type":"text","text":", where you can view, manage, download, or delete them at any time."}]}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"To set this up, grab your Public Key from your Uploadcare project and paste it into the "},{"type":"text","text":"Upload → Public Key","marks":[{"type":"bold"}]},{"type":"text","text":" field in the property panel. If your account was created after September 4, 2025, also add your "},{"type":"text","text":"CDN Subdomain","marks":[{"type":"bold"}]},{"type":"text","text":" (found under Project Settings → Delivery) so file links resolve correctly."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"tmpfiles.org","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"http://tmpfiles.org","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" (public demo host)","marks":[{"type":"bold"}]},{"type":"text","text":" — A quick way to test the component without setting up an account. Files are sent to the free public service "},{"type":"text","text":"tmpfiles.org","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"http://tmpfiles.org","target":"_blank"}}]},{"type":"text","text":" and are "},{"type":"text","text":"automatically deleted after about 1 hour","marks":[{"type":"bold"}]},{"type":"text","text":". This is meant for prototyping only — don't use it for real visitor submissions or sensitive files, since nothing is stored permanently and anyone with the link can access the file during that hour."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Other features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional required-field validation tied into Framer's form submit"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multiple file support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"File type and max size restrictions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully customizable colors, border style, fonts, and icons to match your design"}]}]}]}]},"introduction":"Drag & drop uploads for Forms","slug":"file-upload-box","author":{"framerUserId":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","slug":"deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/019f70ad-b563-73fe-85f4-cb93ad72ceee.png","metadata":{"tint":{"h":30,"s":58,"l":51},"width":1920,"height":1440}}],"post":null,"createdAt":"2026-07-17T15:24:32.948Z","updatedAt":"2026-07-18T15:03:37.498Z","publishedAt":"2026-07-17T15:24:32.940Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://framerfileuploader.framer.website/","price":"10","paymentUrl":"https://contra.com/payment-link/cXcW90Oe-file-upload-box","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"7xyRCBEx1gYMebX3xtqc","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-17T15:24:33.270Z","updatedAt":"2026-07-17T15:24:33.270Z","reported":false}}],"$L5f"]

Suggested for you