Magnetic Dropzone
A dotted-grid file drop zone that leans toward a nearby dragged file and swells its dots under the pointer, with click-to-browse, keyboard picking and removable file tiles.
Preview
Harbor Street handover
Shared with Ines and Malik
3 files · 3.6 MB
- Q3-field-report.pdfPDF · 2.4 MB
- site-plan-v4.pngPNG · 1.1 MB
- fit-out-budget.xlsxXLSX · 86 KB
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| files | MagneticDropzoneFile[] | — | Controlled list of files ({ id, name, size, type?, file? }); pair with onFilesChange. |
| defaultFiles | MagneticDropzoneFile[] | [] | Initial files when uncontrolled. |
| onFilesChange | (files: MagneticDropzoneFile[]) => void | — | Called with the whole new list after files are added or removed. |
| accept | string | — | Input accept syntax (.pdf,image/*); dropped files are checked too. |
| maxSize | number | — | Largest accepted file in bytes. |
| multiple | boolean | true | Allow more than one file per pick or drop. |
| disabled | boolean | false | Disable picking and dropping; tiles stay visible. |
| name | string | — | Name of the hidden file input, for native form posts. |
| label | string | "Drop files here" | Main line inside the zone (followed by "or browse"). |
| hint | string | — | Second line inside the zone; also the input's description. |
| listLabel | string | "Attached files" | Accessible name of the file list. |
| reach | number | 140 | Distance in px from the zone edge at which a dragged file starts to pull it. |
| defaultPhase | "idle" | "near" | "over" | "idle" | Start in a drag phase for previews; a real drag takes over. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.