Multiple File Upload Documentation

If your application has a requirement that is to upload multiple files, the Multiple Files Upload is the plugin to use. This plugin allows you to upload multiple files in one upload form or using drag and drop functionality. To install this component, simply go to the forge page, search for this component and click install.

This component is really simple to use. Follow the next steps to learn how to use this plugin.

How to implement MultipleFileUpload ? (full implementation)

1. After the plugin is installed, create a new web application (only available for traditional) or open your existing web application, and import MultipleFileUpload elements from Manage Dependencies (don’t include elements from *_Extension). 

2. After importing the plugin, open the desired screen to implement the upload feature, or create a new one. You can do this by right-clicking the MainFlow and click Add Web Screen.

3. In your screen, drag a Container where you want to implement the drag and drop upload, and name it FileUploadContainer (as suggestion).
   
   Inside this container drag a Label and set the Value property to “Drag and Drop files here”.
   
   Below the Label drag another Container, name it Files (This container is not mandatory, but it’s recommended to create this, because it will be used as drop detection area). If using, you must name this container.
   
   Below this container, drag the MultipleFileUpload WebBlock.
   
   You should have something like this:
    

4. Fill the parameters required by the WebBlock, and create a new Screen Action needed to handle the OnNotify event. Place it in the Destination parameter.
   

   1. Multiple: 

      Boolean value that allows to select more than one file in file explorer when uploading files (when file explorer is opened using upload button).

   2. ContainerId: 
      Text value that will include the container identifier to use when uploading files. This container will show upload progress and allows drag and drop feature for files upload. If not specified, a drop area is not available.

   3. Tag: 
      Tag name used in UploadCache entity when uploading file. This tag can be anything, useful to find uploaded files in UploadCache entity.

   4. ButtonText: 
      Given text to be displayed in the uploaded button.

   5. ButtonStyle: 
      CSS class name related to style(s) to apply in the upload button. Styles must be included in the stylesheet.

   6. FileProcessURL: 
      The URL where the file is processed. By default, the file is processed to "Upload.aspx" for .NET stack or "Upload.jsf" for J2EE stack. Set by default:
      
      Substr(GetOwnerURLPath(), 0, Index(GetOwnerURLPath(), GetPersonalAreaName()) + Length(GetPersonalAreaName())) + "/MultipleFileUpload/Upload" + GetPageExtension()
      
      When you put this condition to fill the FileProcessURL, an error is going to appear, that’s because you don’t have the function GetPageExtension() imported. Go to the Manage Dependencies, select the HTTPRequestHandler, and select the function you need.
      
      
      

   7. SupportedExtension: 
      List of file extensions allowed for upload. Each extension must be separated by a comma. If empty, all file extensions are supported.

   8. SizeLimit:
      The limit of each file size in bytes. If zero, no limit is defined. This value should be less than what the OutSystems server is configured to allow, otherwise bigger files will not be stored in the cache and unexpected behavior may occur. Examples:
      
      - 26214400, which corresponds to 25MB.
      - 0, which corresponds to no limit.

5. Open your stylesheet, and create this class of CSS in the page theme and apply it to the Files Container.
   .DropArea {
  min-height: 50px;
  border: 1px dashed gray; 
}

6. Create also the following class to override the default CSS from the component. This is needed to fix the red box inside the dashed gray drop area. When you change the size or layout of the drop area, adjust this CSS accordingly.

   .qq-upload-drop-area {
  top: -15px;
  min-height: 48px; 
}

7. Below the MultipleFileUpload WebBlock, drag a new Container and name it FilesUploadedTable. Drag a Label inside this Container and set the Value property to “Uploaded Files”. Below the Label, add a TableRecords that will display all uploaded files.

8. Add a preparation to the screen, in the preparation add an aggregate which source is the Entity table UploadCache and name the aggregate as GetRequestFiles.
   

9. In the table Source Record List, select the recently created aggregate. Add the desirable attributes to the table. Here is an example of Table Records. (Note: A column Action was added to be able to download the uploaded files).
   

10. Now that the UI part is done, let’s go to the logic part. Make following steps:

    1. In your OnNotify Screen Action, add a local variable of the type of Text and name it Response.
       

    2. Create a Session Variable of the type Text and name it UploadError.
       

    3. Open your OnNotify action canvas, and drag an Assign statement, and put the following assignment
       Note: If you don’t have the Deprecated_NotifyGetMessage(),  import it from the Manage Dependencies. This action belongs to the producer System.

    4. Below the Assign statement, add an If statement and set the condition to:
       ToUpper(Substr(Response, 0, 5)) = "ERROR"

    5. Below the If statement created before, drag an Assign and add the following assignment:
       Session.UploadError = If(Session.UploadError <> "", Session.UploadError + NewLine(), "") + Substr(Response, Index(Response, ":") + 1, Length(Response))

    6. To the right of the first If statement, drag another If and set the condition to:
       Session.UploadError = "" or (
    ToUpper(Substr(Response, 0, 11)) <> "COMPLETE[0]" and
    ToUpper(Substr(Response, 0, 8)) <> "ERROR[0]"
)
       Connect the True branch of the first If to the Assign and the False to the recently created If.

    7. To the right of the new If, drag a FeedBackMessage, set the type to Error, and the Message to
       EncodeHtml(Session.UploadError)
       Connect the False branch of the If to the FeedbackMessage.

    8. Below the If drag a RefreshData and select the GetRequestFiles Aggregate. Connect the True branch of the If to the RefreshData.

       
       

    9. Below the FeedBack Message, drag an Assign statement and add the following assignment.
       

    10. Connect the FeedbackMessage connector to the Assign statement and connect the Assign connector to the RefreshData.

    11. Below the RefreshData drag an Ajax Refresh and select the Container of the TableRecords
        (Note: You can only select this container if you name it!) Connect the RefreshData to the AjaxRefresh.

    12. Your action should look like this:
        

    13. The download action is quite simple and should look like this: