MultiFile Upload
Last updated
Last updated
The multi-file upload widget allows you to upload multiple files of different file types simultaneously, facilitating the addition of a list of files to the WEM project. The widget first packages the files into JSON, which can then be imported into your application.
In the image above, you can see the widget as shown on the client side of your project. It consists of a large drop-off field and a select file button. This opens a standard upload file explorer window.
jsonFIlesOutput
Text field
In this field the Json in which the files are stored until handled
UploadExit
Dropdown
Exit used for the processing of the JSON file created by the widget
AllowedExtension
Text
List all allowed extensions separated by commas. Leave empty to allow everything. Example: "png, jpeg, jpg"
FileMaxSizeMB
Number
Maximum allowed file size in MB
Wrong File Extension Error Message
Text
Error returned when the extension is not in the allowedextension field.
Wrong File Size Error Message
Text
Error returned when the filesize is bigger then the maximum allowed file size.
The process begins with the interaction node, here the widget is displayed for the user. The first step is adding an exit that the widget can utilize for the processing and establishing a text field to store the uploaded information until all files are incorporated into the database.
Unlike some other widgets, this one has a few important steps before you can use it. This widget turns the uploaded files into JSON that needs to be handled after the upload. After creating the interaction and adding the widget, you need a process to add the files to your database.
Initially, we proceed by finalizing the datalist and fields employed by the widget. In the accompanying image, you observe the creation of a list named "files," comprising, at a minimum, the "file" field, and optionally, the "name" field and the "New File" boolean field (defaulting to true). Upon file upload, it is assigned a generic name by default, generated by WEM; however, this can be replaced with the original file name, as demonstrated in the image below.
All necessary fields are now created and we finish the process of handling the documents and storing them in the files list. This is done with the import JSON node, and optionally extended with a loop to replace the generic WEM names. In the image below you can see how we set up the Import JSON definition:
The files list used in the image above is the same list we made earlier with the name field and file field from that list. This will add a new row for each file uploaded and store the original name in the name field.
It is important to keep the name of the objects you map to your fields as name and blob, otherwise this will not work properly.
After adding a save node to the flow all files are saved in your datamodel and can be handled further for any use case you can think of.
Extra: Depicted in the initial flowchart image, there is a loop featuring the "rename file" and assignment node. The loop is configured to iterate over each row where the "New File" field is true, and within the loop, this field is set to false. The "rename file" operation utilizes the "name" field from the "Files" list as the New Name property, and the File field from the same list serves as the File output.
Following this, by incorporating a save node and interacting with a data grid associated with the "files" list, immediate visualization of the results becomes possible.
