Multi-upload files

Live Sample GitHub

We have implemented multi-file upload. You can use a dedicated drag-and-drop zone or a standard button to select your files.

This feature supports the following types:

• List widget
• GroupingHierarchy widget

This feature supports only field fileUpload

The interface supports three distinct modes for displaying the bulk file upload functionality, allowing for flexible user experience configuration:

1. Combined Mode (Button + Multi-upload) Live Sample GitHub

This mode displays both a button to trigger the upload dialog and a drag-and-drop widget, giving the user maximum choice in how they initiate the upload.

1. Button-Only Mode (Button) Live Sample GitHub

This mode is designed to display only a button. Clicking it opens the operating system's standard file selection dialog for bulk uploading files.

1. Widget-Only Mode (Multi-upload files) This mode displays only the interactive drag-and-drop upload widget, without a separate button.

Live Sample GitHub

How does it look?

Combined Mode (Button + Multi-upload)Button-Only Mode (Button)Widget-Only Mode (Multi-upload files)

There are five main colors used for the progress bar and icon:

• light gray — empty progress bar
• blue — upload in progress
• green — upload completed successfully
• red — an error occurred
• dark gray — file skipped and will not be uploaded (the reason can be viewed by hovering over the progress row)

light graybluegreenreddark gray

Uploaded:

• If all files are uploaded successfully, the progress notification automatically disappears after 2 seconds.
• If some files are skipped, the notification remains visible until it is closed manually or the user navigates to another screen. Information about successfully uploaded files still disappears after 2 seconds.
• When hovering over a notification, it will not disappear until the mouse is moved away (successful notifications also remain visible in this case)
• Limitation: When navigating to another screen, the notification is hidden and the upload is canceled

Button

A file can be added not only through the standard selection dialog but also by dragging and dropping it onto the upload button.

Info

For fields of type fileUpload, there is an option to cancel the upload: if a new file is added while the previous one is still uploading, the previous upload is canceled.

How to add?

Example

Button And Multi-upload filesMulti-upload filesButton

Step1 Add actionKey associate to corresponding .widget.json.

      {
        "actionKey": "associate",
        "fieldKey": "customFieldFile",
        "mode": "default-and-file-upload-dnd"
      }

{
  "name": "MyExampleAllList",
  "title": "List",
  "type": "List",
  "bc": "myexample",
  "fields": [
    {
      "title": "Custom Field File",
      "key": "customFieldFile",
      "type": "fileUpload",
      "fileIdKey": "customFieldFileId"
    }
  ],
  "options": {
    "buttons": [
      {
        "actionKey": "associate",
        "fieldKey": "customFieldFile",
        "mode": "default-and-file-upload-dnd"
      }
    ],
    "actionGroups": {
      "include": [
        "create",
        "associate",
        "delete",
        "save"
      ]
    }
  }
}

Step1 Add actionKey associate to corresponding .widget.json.

      {
        "actionKey": "associate",
        "fieldKey": "customFieldFile",
        "mode": "file-upload-dnd"
      }

{
  "name": "MyExampleFileList",
  "title": "List",
  "type": "List",
  "bc": "myexample",
  "fields": [
    {
      "title": "Custom Field File",
      "key": "customFieldFile",
      "type": "fileUpload",
      "fileIdKey": "customFieldFileId"
    }
  ],
  "options": {
    "buttons": [
      {
        "actionKey": "associate",
        "fieldKey": "customFieldFile",
        "mode": "file-upload-dnd"
      }
    ],
    "actionGroups": {
      "include": [
        "create",
        "associate",
        "delete",
        "save"
      ]
    }
  }
}

Step1 Add actionKey associate to corresponding .widget.json.

      {
        "actionKey": "associate",
        "fieldKey": "customFieldFile",
        "mode": "default"
      }

{
  "name": "MyExampleDefaultList",
  "title": "List",
  "type": "List",
  "bc": "myexample",
  "fields": [
    {
      "title": "Custom Field File",
      "key": "customFieldFile",
      "type": "fileUpload",
      "fileIdKey": "customFieldFileId"
    }
  ],
  "options": {
    "buttons": [
      {
        "actionKey": "associate",
        "fieldKey": "customFieldFile",
        "mode": "default"
      }
    ],
    "actionGroups": {
      "include": [
        "create",
        "associate",
        "delete",
        "save"
      ]
    }
  }
}

Step2 Add setFileAccept to corresponding FieldMetaBuilder.

    fields.setFileAccept(MyExampleDTO_.customFieldFile, List.of(".png",".pdf",".jpg",".jpeg"));

```json

```

Step3 Add associate to corresponding ResponseService.

```java
    .associate(ast -> ast
    .withCustomParameter(Map.of("subtype", "multiFileUpload"))
    .text("Add Files"))
```

```json

```

Step3.1 Add doAssociate to corresponding ResponseService. In this service, it is necessary to describe what happens to the files during multiple upload, as well as how and with which properties they are stored.

```json

```

Step3.2 Add function fileUpload to corresponding ResponseService.

```json

```