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:

This feature supports only field fileUpload

How does it look?

Button And Multi-upload filesButtonMulti-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)

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

```