Attachment

Select files from your file-system for upload. Use it to attach and upload files to the server.

Example

Loading...

Properties

:::palette-item com.flowable.design:flowable-core-palette,com.flowable.design:flowable-core-palette com/flowable/palette/core.form.palette,com/flowable/palette/form.template.palette cloud-attachment

Custom texts

selectFilesText
Additional variables can be used: multiple
e.g. Click here tu upload files
e.g. Drag&drop new file{{multiple}} (new file / new files)

dropFilesText
Additional variables can be used: multiple, draggedfiles
e.g. Release to drop files
e.g. Dropping {{draggedFiles}} file{{multiple}}

allowedFilesText
Additional variables can be used: maxfiles
e.g. Too much files to drop
e.g. Allowed files is {{maxfiles}}

maxFilesText
Additional variables can be used: maxfiles
e.g. No more files allowed
e.g. Max files reached. Max is {{maxfiles}}

How this component works with the payload

Given an upload component with value {{my_upload}} the payload will be an array of file info.

{
  my_upload: [
    {file_1_info}, 
    {file_2_info}, 
    ... 
  ]
}

Let's see each file info object how it should look like in the payload:

Once a file has been added

{
  my_upload: [
    {
      name: "file-1.zip",
      size: "123456789",
      fileData: {},
      previewUrl: "blob:https://url.com/1234-5678-abcd",
      autoupload: false,
      uploadUrl: "https://url.com/upload",
      progress: 0
    }
  ]
}

• name is the original file name
• size is the file size in bytes
• fileData is the HTML5 API full file data structure
• previewUrl is a URL accessing a preview image of the file.
  It's first generated in local as a blob resource and can be overwritten by server.
  It will be shown if preview: "thumbnail" was set in the definition.
• autoupload is the autoupload setting from the definition
• uploadUrl is the uploadUrl setting from the definition
• progress is the progress of the file in percent.
  It mustn't be changed.
  It will be increased automatically while uploading.

Once a file has been uploaded

{
  my_upload: [
    {
      name: "file-1.zip",
      size: "123456789",
      previewUrl: "blob:https://url.com/1234-5678-abcd",
      autoupload: false,
      uploadUrl: "https://url.com/upload",
      progress: 0,
      ...
      <JSON server data>
      downloadUrl: "https://url.com/download/file-1.zip",
      status: 3
    }
  ]
}

• Same data as when file was added will be there but the unnecessary fileData
• <JSON server data> is the server response that will be added even overwritting existing data
• downloadUrl is the url where to access the uploaded file.
  If it applies it should come in <JSON server data>.
  It will be used to mark attached/uploaded file with a link as downloadable.
• status is the upload result.
  It mustn't be changed.
  Possible status codes are:

Status	Code name	Description
0	old	Previously uploaded file
1	deleted	Attached (uploaded) file marked as deleted
2	uploading	File is being posted
3	success	Upload finished and successful
4	error	Upload finished with errors
5	invalid	Not a valid resource or file type
6	new	Just selected file, not yet uploaded

File Metadata

Additional data can be added to files through file types when hasFileType is true for this component. It requires the Form getFileTypes and getFormDefinition props to be defined.

After adding a file the user will see a "content type" dropdown with all the available file types. When one of them is selected the associated form will be displayed and the user will be able to add the required metadata.

That metadata will be stored inside the metadataProperties inside the file data. In case of doubt please have add any metadata to one file and see the effect in the paylad in the developer tools

SharePoint Integration

v3.15.0+

note

The SharePoint integration is a connector that is not enabled in Flowable Work by default and requires an additional license.

Set-up

Make sure you properly configured the SharePoint integration. Check out this Page for detailed instructions.

Modelling

You can apply the SharePoint integration into existing or new attachment fields. Select the Attachment property and click on the File source option.

Open the dialog and select SharePoint in addition to local. You can also decide if you want to store copies of SharePoint files or the references.

Reference SharePoint files

The default configuration will always reference SharePoint files. That means the actual data is always stored in SharePoint and no physical copy is created. Read more about the handling of permissions.

Store copies of SharePoint files

Reasons for storing physical copies can be:

• Performance
  • especially if with excessive read operations during your automation.
• Compliance and Auditing
  • certain regulations might require physical copies of data for auditing and compliance purposes.

Usage in Flowable Work

In this example, we use the created form as the start form and work form of our case. The first thing you see is the small SharePoint button in the bottom left corner of the attachment field.

Click on it and will open the SharePoint dialog

You will see a list of all the available Sites. Click the button on the right side to navigate directly to SharePoint. Click on the site to view all folders and documents.

Folders

Files

Select all the files you want and click on submit.

After creating the case, we can take a look at the content items within the work form

note

Similar to content items that were created from local files, the icon and thumbnail are not created for provisional items.

Let's have a look at content items from the Documents tab perspective. As you can see, the menu for each SharePoint content item changed.

• Rename will only rename the content-item within Flowable Work, but not the actual file in SharePoint.
• You can Open in SharePoint. A new window will open and the SharePoint item is displayed.
• Download file will download the current file from SharePoint.
• Move or copy will only move the content-item within Flowable Work, but not the actual file in SharePoint.
• Delete file will only delete the content-item in Flowable Work, but not the actual file in SharePoint.
• You are no longer capable of creating a new version. That is 100% in SharePoint business.

File opened in SharePoint

note

opening office files will open them in the corresponding Office 365 suite.

Permissions

If you decide to store SharePoint files as references, the permissions within Flowable Work only apply to the content-item. The actual file data permissions are managed by SharePoint. That can create a scenario, where a user is granted read access to the content item in Flowable, but has access to the file in SharePoint. Downloading the file will result in an error with status code 404. However, using the Open in SharePoint will open a new tab with the SharePoint website to request access.