Documentation
Uploadgrid

Upload Grid

image

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

PropTypeDefaultDescription
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 onChange callback, but receives only last changed file(s), will not call onChange if given

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 callback() yourself.

The default behavior uses window.confirm() before calling onChange to remove files.

multiple
Boolean

Whether to get fileInput(s) as list, even if maxFiles = 1, ignored if maxFiles > 1 or types is defined

maxFiles
Number
1

Number of files that can be uploaded, ignored if types is defined

maxColumns
Number

Maximum number of grid columns, default is the divisor of maxFiles closest to its square root

gap
CSS Length
'1em'

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
'image/*'

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 false to disable File label (note: Upload component may still show list of files)

Pass i string to always show incremental count or type.name (if types given)

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

Example
Via Universal Input

Grid Customisation

File Uploads Grid of 3 Dropzones
Grid of 3 in a Row
Tinder Photo Upload Grid Style (9 Square Slots)
1
2
3
4
5
6
7
8
9
Custom Dropzone UI
Custom Select/Remove Icon

Input States

Disabled
Read only
image.png512 x 512
image.svg1kB
Loading

Event Handlers

On Change Callback
On Focus Callback
On Blur Callback
On Remove Callback

Please refer to Universal File Uploads Input for additional upload field props.