Skip to main content

Introducing Workflow Engine, try for FREE workflowengine.io.

Uploader

Introduction

The Uploader component is a practical element that enables users to upload files from their device to the form by clicking the corresponding button or via drag-and-drop. It is particularly useful for attaching documents, images, videos, audios, and other files to the form submission. This component is based on Uploader. It is included within the following NPM package: @react-form-builder/components-rsuite.

This component can be configured to accept specific file types, configure methods, enable or disable drag-and-drop functionality, and so on. These properties along with the style options are listed and described below.

Main properties

The following general properties are available within the Main tab:

NameTypeDescription
ActionstringRequired field that sets your uploading URL
AcceptstringComma-separated list of one or more file types (e.g., .pdf, audio, etc.). Refer to HTML attribute accept for more information
Auto uploadbooleanIf set to true, automatically uploads files after selecting them
Custom ElementbooleanIf set to true, turns the upload button into a custom element
Disable multipartbooleanIf set to true, disables the use of a multipart form for file upload and streams the file instead. This is useful for APIs that expect file uploads to be streamed, such as Amazon S3
DisabledbooleanIf set to true, disables the component
Read OnlybooleanIf set to true, makes your checkbox unavailable to interact with
Disabled File ItembooleanIf set to true, disables the the file list
DraggablebooleanIf set to true, enables drag-and-drop to upload
File List VisiblebooleanIf set to false, makes the file list invisible
List TypechoiceSets the list style (i.e., text, picture-text, or picture)
MethodstringThe HTTP (POST) method of upload request
MultiplebooleanIf set to true, allows multiple file uploads to be selected at a time
NamestringSpecifies the parameter name for the uploaded file
RemovablebooleanIs set to true, makes file list removable
TimeoutnumberSpecifies the time limit in milliseconds for the file upload to complete
With credentialsbooleanIf set to true, carries cookies when uploading, allowing the server to authenticate upload requests
File Listfile typeSets the list of uploaded files. Includes Name (file name string), FileKey (unique file ID), and URL (preview link)

At the bottom of the Main properties menu, you can find additional options:

Style properties

These are properties that allow to customize the size, color and other style properties of your component:

  • For Device: You can provide component's style customization for all devices or specific devices by using this dropdown list. Refer to Adaptive Layout for more details.
  • Component > Class Name: Add a class name for your component for the subsequent styling if necessary.
  • Wrapper: The options below enable you to tailor the appearance of your component and customize it for a specific device type, as selected in the For Device property:

    NameTypeDescription
    WidthnumberSpecifies the width for your component
    HeightnumberSpecifies the height for your component
    Margin top/right/bottom/leftnumberMargin values for you component
    ColorstringAllows customizing the text color
    Background colorstringEnables customizing the background color
Stay in the know
Quickly Build Drag-and-Drop Forms
Star us on GitHub