Multiple files Upload (with Validation)

1.1 Description of the component:

This is a reusable component, used to upload multiple files at a time and can validate. We can

use drag and drop as well to upload multiple files. By using this we can limits the file size,

file type duplicate file and limits to upload the number of files to upload.

If we are selecting multiple files, among which some files having size

more than given size, some files having type other than given type and some files are

duplicate files then it will upload only those files which fits in size, type, duplicate criteria

and limits to upload the number of files.

. We can drag and drop multiple files at a time and can upload those fits in size, type,

duplicate criteria and limits to upload the number of files.

We just need to set the variable like FileType, MaxFileSize, Units (KB,

MB, GB and TB only) and MaxNumberOfFiles. Unit is limits to TB only. For further units

logic needs to implement.

1.2 Version in which component is built in:

This component is built in Reactive web application Outsystems version 11.54.29 

1.3 Device Supported:

This component supported both reactive web application and mobile application. Also can

built in the Outsystems version 11 to 11.54.29.

1.4 Pre-requisites/Dependencies of the component:

1. This component supports the Outsystems version 11 to 11.54.29.

2. Need to include extension BinaryData. From those server actions only server action

Base64ToBinary is used.

3. Need to include extension Text in dependency. From those server actions only server

action String_Split is used.

1.5 Steps to reuse /import into target code:

1. We need to import the blocks WB_FileUpload and WB_MultipleileFileUpload in our

application.

2. Create a screen with name MultipleFileUpload then create local variables:

NumberOfFiles(Data Type: Integer), UploadedFilesList(list of records of name:

Binary, Name, Size and Type), ShowLoading(Boolean), FileType(Data Type: Text,

Default value: "xls,xlsx,doc,doxc"), MaxFileSize(Data Type: Integer, Default value:

30), MaxNumberOfFiles(Data Type: Integer, Default value: 5), Units(Data Type:

Text, Default value: “KB”).

3. Then add a web block by selecting web block WB_MultipleileFileUpload in widget

tree design.

4. Create the handler for each event of that blocks by name

MultipleileFileUploadOnFileDelete, MultipleileFileUploadOnFilesListDelete,

MultipleileFileUploadOnFilesListUpdate and MultipleileFileUploadOnUploadError

and make changes in respective actions as shown in below screenshot.

MultipleileFileUploadOnFileDelete:

MultipleileFileUploadOnFilesListDelete:

MultipleileFileUploadOnFilesListUpdate:

MultipleileFileUploadOnUploadError:

5. Now you are ready to publish and then can upload multiple files at a time by selecting

files from browser and through drag and drop.

1.6 Test Cases to execute any in specific to this component:

Below are the test cases for given validation in this component (It limits FileType to

"xlsx, xls, doc, docx", MaxFileSize to 30, Units to "KB" and MaxNumberOfFiles to 5 so we can

upload only 5 files here as per limitation.):

1. Upload xlsx or xls or docx or doc files.

2. When click on Clear All, it removes all the files. When click on x in front of each file

name, it removes only that file.

3. Files can drag and drop Successfully.

4. Select files other than "xlsx or xls, docx or doc". It is displaying message “Only allow file

type xls,xlsx,doc,docx ”.

5. Select file size more than 30KB. It shows the messge “File size should be less

than or equal to 30KB”.

6. Select a file of other than “xlsx or xls, doc or docx” type and size more than 30KB. Then

shows the message,” File size should be less than or equal to 30KB, Only allow file

type xls,xlsx,doc,docx”.”.

7. Select one docx file and other one of other type. Then it will show the message "Only

allow file type xls,xlsx,doc,docx”.

8. Repeat the step 7(select the same files as in step 7). Then it will shows the message

“Only allow file type xls,xlsx,doc,docx . Duplicate File is not allowed.”

9. Select one file type as xlsx or xls and other file type as xlsx or xls with size more than

30KB. Then shows the message ” File size should be less than or equal to 30KB”.

10. Repeat the step 9(select the same files as in step 9). Then it will show the message “File

size should be less than or equal to 30KB. Duplicate File is not allowed.”

1.7 Known Issues /Errors of this component if any:

1. Units (like KB, MB, GB and TB only), Unit is limits to TB only. For further

units, logic needs to implement in client action ValidateSize of logic section

in module MultipleFilesUpload.