Multiple File Upload

Stable Version 3.0.1 (O11)
Also available for 10, 9.1, 9.0, Older
Published on 26 June 2019 by 
Multi Uploaders
Multi Uploaders
Created on 29 April 2013

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.

  1. After the plugin is installed, create a new Web Application. Import Multiple File Upload from Manage Dependencies. 

  2. After importing the plugin, add a screen. You can do this by right-clicking the MainFlow and click Add Web Screen.

  3. Open the recently created screen, and drag a Container to the MainContent Placeholder and name it FileUploadContainer. Inside this container drag a Label and set the Value to “Drag and Drop files here”. Below the Label drag a Container, name this Container Files. Below this container drag the WebBlock in the Multiple FileUpload. (It’s not mandatory to create the Files container but it’s recommended to create a container to be the drop detection area.)

  4. Fill the parameters required by the WebBlock and also create the Screen Action needed to handle the Notify.

    The parameters of the WebBlock should look like this. 

    Set the FileProcessURL to:

    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.

  5. 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 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 FilesUpload webblock, drag a new Container and name it FilesUploadedTable. Drag a Label inside this Container and set the value to Uploaded Files. Below the Label add a TableRecords.

  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 file )

  10. Now that the UI part is done, let’s go to the logic part. In the Interface tab, select the OnNotify action. Please follow the next steps:

    1. Add a local variable of the type of Text and name it Response.

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

    3. 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:

Support Options
This component is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from Multi Uploaders who created this component.
Multiple File Upload has no dependencies.