56:I[473921,["/creators-assets/_next/static/immutable/chunks/456dxp3afc8vw.js","/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/0bntpu9zyiup3.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/3npaj8f4glbs_.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/2knggklfeqwdv.js","/creators-assets/_next/static/immutable/chunks/18e_sauhpyyit.js","/creators-assets/_next/static/immutable/chunks/13xqrk3e5k8yu.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/3oybmd01gs-b6.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1yn3k6g09tq32.js","/creators-assets/_next/static/immutable/chunks/3ly-i84yiij4i.js","/creators-assets/_next/static/immutable/chunks/1cey7skpirawe.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2n9qmawfhavju.js","/creators-assets/_next/static/immutable/chunks/0m8lhf01xskqj.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/2lxef2-u417vc.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/439i_r5_4eszl.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/110hzb6dmcbdr.js","/creators-assets/_next/static/immutable/chunks/2eiu9v0ook5ln.js","/creators-assets/_next/static/immutable/chunks/1zt764sfv2wd7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/3gx0_q52o4oil.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js"],"PostDetailCard"] 57:T682,

Dropzone is a drag-and-drop file field for Framer sites: contact and brief forms, application pages, client portals, anywhere a visitor needs to hand you a file. Native Framer forms have no file upload, and most upload components lean on a third-party storage service. Dropzone works on its own: it reads files on the visitor's device, and sends them only to an endpoint you choose.

The box tells a small story with every file. While a file is dragged over it, the figure opens a drawer, slides out a tray or lifts its flap. On drop, the file's chip flies in, the box gulps, and the file's tag issues from the figure with its progress filling behind the name. Removing a file plays the same story in reverse: the slot opens and the card lifts out. Oversize files, wrong types and a full box get a kind line inside the box, with a short shake, and repeated size refusals escalate through five lines.

Everything is set in the property panel, in five groups: Content, Look, Limits, Upload and Behavior. The component follows reduced motion (no shake, stretch or overshoot; short crossfades instead) and stays still on the Framer canvas.

Style: Hairline (seven animated line figures), Plain (a quiet arrow-into-tray icon for any site) or Custom (your own SVG or PNG, painted in Ink or kept in its colours).
Figures (Hairline): Drawers, Pigeonholes, Folder, Trays, Box, Mailbox and Single tray.
Files as: Tags (files come back out of the figure, inside the box) or List (rows under the box, with size, percentage and image thumbnails).

53:[["$","$L56",null,{"post":{"id":"01a12c6c-15e1-726d-bfaf-281b7488a426","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"a1e0c773-d1ab-4dc1-86de-645157218a97","name":"BuiltByKern","slug":"builtbykern","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a1e0c773-d1ab-4dc1-86de-645157218a97/vd6q2r4n","followed":false,"followsYou":false},"media":[],"resources":[{"id":"IIEQ4lh64SJVhM5rj1g7","resolved":true,"title":"Drop Zone","body":"$57","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Dropzone is a drag-and-drop file field for Framer sites: contact and brief forms, application pages, client portals, anywhere a visitor needs to hand you a file. Native Framer forms have no file upload, and most upload components lean on a third-party storage service. Dropzone works on its own: it reads files on the visitor's device, and sends them only to an endpoint you choose."}]},{"type":"paragraph","content":[{"type":"text","text":"The box tells a small story with every file. While a file is dragged over it, the figure opens a drawer, slides out a tray or lifts its flap. On drop, the file's chip flies in, the box gulps, and the file's tag issues from the figure with its progress filling behind the name. Removing a file plays the same story in reverse: the slot opens and the card lifts out. Oversize files, wrong types and a full box get a kind line inside the box, with a short shake, and repeated size refusals escalate through five lines."}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is set in the property panel, in five groups: Content, Look, Limits, Upload and Behavior. The component follows reduced motion (no shake, stretch or overshoot; short crossfades instead) and stays still on the Framer canvas."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Style:","marks":[{"type":"bold"}]},{"type":"text","text":" Hairline (seven animated line figures), Plain (a quiet arrow-into-tray icon for any site) or Custom (your own SVG or PNG, painted in Ink or kept in its colours)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Figures (Hairline):","marks":[{"type":"bold"}]},{"type":"text","text":" Drawers, Pigeonholes, Folder, Trays, Box, Mailbox and Single tray."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Files as:","marks":[{"type":"bold"}]},{"type":"text","text":" Tags (files come back out of the figure, inside the box) or List (rows under the box, with size, percentage and image thumbnails)."}]}]}]}]},"introduction":"Drop real files onto a figure","slug":"drop-zone","author":{"framerUserId":"a1e0c773-d1ab-4dc1-86de-645157218a97","name":"BuiltByKern","slug":"builtbykern","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a1e0c773-d1ab-4dc1-86de-645157218a97/vd6q2r4n","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a1e0c773-d1ab-4dc1-86de-645157218a97/01a12c6b-fccf-7209-9efe-cb3b6e209124.png","metadata":{"tint":{"h":60,"s":53,"l":39},"width":2400,"height":1800}}],"post":null,"createdAt":"2026-10-11T19:24:02.782Z","updatedAt":"2026-10-12T12:06:45.088Z","publishedAt":"2026-10-11T19:24:02.780Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Kern-Dropzone-IgWGRV.js@iUG7tGjauDx13Tego786","previewUrl":"https://dropithere.framer.website","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"iUG7tGjauDx13Tego786","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-11T19:24:03.425Z","updatedAt":"2026-10-11T19:24:03.425Z","reported":false,"type":"post"}}],"$L58"]

Suggested for you