Upload

The Upload upload field can be used to upload one or multiple files. It’s not field’s responsability to upload files to a backend, see “Usage” section.

Example


{
  "version": 1,
  "layout": "vertical",
  "fields": [
    {
      "component": "upload",
      "label": "My Avatar",
      "name": "avatar",
      "react-rsuite5": {
        "accept": [
          ".png",
          ".jpg"
        ],
        "multiple": false,
        "tooltip": false,
        "uploadButtonLabel": "Select avatar",
        "uploadButtonAppearance": "primary"
      },
      "hint": "Select a .png or .jpg file to upload"
    }
  ],
  "name": "Test upload"
}

Usage

The field doesn’t upload the selected images, it just provides the payload of the selected files


{
  "avatar": [
    {
      "blobFile": {},
      "name": "my_file_name_1.png",
      "fileKey": "_jmvfqbpo8hj"
    },
    // ... more files
  ]
}

Note that if the multiple is set to false the returned value from the field is a single object.

To upload the content of the file with JavaScript


<LetsForm
  form={MY_FORM_WITH_UPLOAD_FIELD}
  onSubmit={async values => {
    const formData = new FormData();
    formData.append('file', values.avatar.blobFile, values.avatar.blobFile.name)
    const response = await fetch('https://my.endpoint/upload', {
      method: 'POST',
      headers: {
        Accept: 'application/json'
      },
      body: formData,
    });
    const json = await response.json();
    // do something with the response
    // ... 
  }}
/>

Reference

Property	Type	Description
component	string	= "upload"
name	string	The name of the field and the key of the JSON
label	string \| i18n	Label of the field
hint	string \| i18n	Help text for the field (generally shown below the input box)
disabled	boolean	Disables and greys out the field
hidden	boolean	Hides the field from the form
accept	array	Accepted files, file extension or mime type: .doc, .pdf, video/*, image/png, etc.
className	string	CSS class name to assign to the field container
Pick up a framework to show specific properties Select framework