Skip to main content

Upload

We can define a file upload in the form.

Options​

We can define several options for the upload component

allowedFileTypes​

An array of file extension allow to upload

  • .pdf
  • .doc
  • .docx
  • .xlsx
  • .xls
  • .png
  • .jpg
  • .jpeg
  • .gif

Defaults to all

maxNumberOfFiles​

The maximum number of file allowed, default to 10

minNumberOfFiles​

The minimum number of file allowed, default to 0

maxFileSize​

The max file size allowed, default to 25Mb

maxTotalFileSize​

The max total file size allowed, default to 100Mb

showInformations​

Determines if the component displays the hint of the configuration or not

showFileCount​

Determines if the component displays the count of uploaded file

showMaxTotalFileSize​

Determines if the component displays the total file size

as​

Determines how we show the upload component. The dashboard opens in the modal The dropzone, is directly shown in place of the button.

  • dashboard (default)
  • dropzone

Examples​

Simple uploader​

The upload button consist on a button that is shown (next to a label like a regular button), it opens a modal within is a file selector / dropzone where to select the file to upload.

{
  "upload": {
    "component": "upload",
    "label": "Upload an image",
    "options": {}
  }
}

Uploader withtout any hint​

{
  "upload": {
    "component": "upload",
    "label": "Upload an image",
    "options": {
      "showInformations": false,
      "showFileCount": false,
      "showMaxTotalFileSize": false
    }
  }
}

Only images​

{
  "image": {
    "component": "upload",
    "label": "Upload an image",
    "options": {
      "allowedFileTypes": [".png", ".jpg", ".jpeg", ".gif"]
    }
  }
}

As dropzone​

{
  "upload": {
    "component": "upload",
    "label": "Upload an image",
    "options": {
      "as": "dropzone"
    }
  }
}

Storybook Examples​

Upload Input#

Upload Input With Options#

Upload Input Without Informations#

Upload Input Default Values#

Disabled Upload Input#

Only Images Upload Input#

Upload With Validations#

Upload With Size Restriction#

Upload Input With Visible Condition#

Upload As Dropzone#

Dropzone With Initial Values#

Dropzone With Too Many Files#

Dropzone With Too Much Size#

Multiple Upload Inputs#

Dropzone Disabled#