Upload Grid
UploadGrid is a set of file Upload inputs with multiple dropzones in a grid-like layout. Each dropzone can show image preview of selected files, with extra info, such as image resolution and file size.
TODO: Universal Input API, with input file
format
,parse
,normalize
and event action handlers.
Props
Prop | Type | Default | Description |
---|---|---|---|
initialValues | Array |Object | Uploaded FileInput(s) value to render initially or to sync with | |
onChange | Function | Handler(event, fileInput(s), name, self) when file(s) change, receives all changed file(s) since initialization | |
onChangeLast | Function | Similar to | |
onRemove | Function | Handler(event, fileInput(s), name, self, callback) before input files are to be removed, To use custom behavior, set event.preventDefault, then fire The default behavior uses window.confirm() before calling | |
multiple | Boolean | Whether to get fileInput(s) as list, even if maxFiles = 1, ignored if | |
maxFiles | Number |
| Number of files that can be uploaded, ignored if |
maxColumns | Number | Maximum number of grid columns, default is the divisor of | |
gap | CSS Length |
| Spacing between grid slots, can be any CSS value, required if maxFiles > 1 |
kind | Any | Type of file (added as attribute to new FileInput uploads) | |
noPreview | Boolean | Whether to disable selected/uploaded file(s) preview (aka images, video, etc.) | |
noPreviewClean | Boolean | Whether to disable automatic garbage clean to release memory for unused File previews | |
preview | String |Number |Boolean |Function | Custom function preview(fileInput, index, self) or node to render for selected/uploaded file slot | |
previewAccept | String |
| Comma separated list of File MIME types or extensions, similar to <input accept=""/> to enable File preview |
previewClass | String | CSS class to add to preview node | |
square | Boolean | Whether to add 'squared' CSS class to make the dropzone fill available space as square | |
slotLabel | Boolean |Enum | Whether to always show File label, like: incremental slot count, identifier type.name, or File.name. Pass Pass By default, File.name is shown when it has preview. | |
types | Array | Named Identifier definitions for each upload type in the grid, default is incremental count |
Examples
Basic Usage
Grid Customisation
Input States
Event Handlers
Please refer to Universal File Uploads Input for additional upload field props.