File upload / dropzone with drag-drop, image previews, per-file progress, validation, auto/manual upload and list or grid layouts.
<link rel="stylesheet" href="https://cdn.get-set.it/gs-upload/latest/gs-upload.min.css"> <script src="https://cdn.get-set.it/gs-upload/latest/gs-upload.min.js"></script>
import Upload from '@get-set/gs-upload'; export default function App() { return ( <Upload> <div className="content">Your Upload content</div> </Upload> ); }
| Option | Type | Default | Description |
|---|---|---|---|
| reference | string | none | Reference. |
| multiple | boolean | true | Allow selecting more than one file. Default: true. |
| accept | string | string[] | none | Accepted types — mime(s) and/or extension(s), comma-joined or array. |
| maxSize | number | false | false | Max size per file in bytes. `false`/0 disables. Default: false. |
| maxFiles | number | false | false | Max number of files kept. `false`/0 disables. Default: false. |
| minFiles | number | 0 | Minimum number of files required before `upload()` succeeds. Default: 0. |
| dedupe | boolean | true | Reject a file whose name+size already exists in the list. Default: true. |
| directory | boolean | false | Allow selecting whole directories (webkitdirectory). Default: false. |
| paste | boolean | true | Enable paste-to-upload (Ctrl/Cmd+V of files/images). Default: true. |
| clickable | boolean | true | Enable click-to-browse on the dropzone. Default: true. |
| dragDrop | boolean | true | Enable drag-and-drop onto the dropzone. Default: true. |
| auto | boolean | true | Auto-upload each file as soon as it is added (requires `url`). Default: true. |
| url | string | none | Endpoint URL for uploads. |
| method | GSUploadMethod | 'POST' | HTTP method. Default: 'POST'. |
| headers | Record<string, string> | none | Extra request headers. |
| fieldName | string | 'file' | Form field name each file is sent under. Default: 'file'. |
| withCredentials | boolean | false | Send cookies / auth with the request. Default: false. |
| data | Record<string, string> | none | Extra form fields sent alongside each file (multipart). |
| label | string | none | Big label shown inside the dropzone. |
| hint | string | none | Secondary hint line under the label. |
| buttonText | string | 'browse' | Text of the browse link/button. Default: 'browse'. |
| preview | boolean | true | Show image thumbnail previews for image files. Default: true. |
| progressBar | boolean | true | Show a per-file progress bar. Default: true. |
| layout | GSUploadLayout | 'list' | File list layout. Default: 'list'. |
| showList | boolean | true | Show the file list at all. Default: true. |
| removable | boolean | true | Show the per-file remove button. Default: true. |
| size | GSUploadSize | 'md' | Dropzone size preset. Default: 'md'. |
| disabled | boolean | false | Disable all interaction. Default: false. |
| reducedMotion | 'auto' | boolean | 'auto' | Honor `prefers-reduced-motion`. 'auto' | true | false. Default: 'auto'. |
| theme | GSUploadTheme | 'auto' | Visual theme. `auto` follows prefers-color-scheme. Default: 'auto'. |
| accentColor | string | none | Accent color (CSS var --gsu-accent). |
| rtl | boolean | false | Right-to-left layout. Default: false. |
| className | string | none | Extra class name applied to the root. |
Drop files anywhere on the zone.
Thumbnails for image uploads.
Individual upload progress bars.
Type, size and count constraints.