This how-to describes how to use the multiple file upload.

Note that Internet Explorer 9 (IE9) is not able to handle multiple files, only single files. In IE 10+, Firefox and Chrome multiple files works properly.

For the functionality of multiple files you do not need to install any plug in.

Step-by-step guide

To handle multiple files follow these steps:

View the flow

The flow of an application handling multiple files could be as follow:

View the runtime application

When putting a multiple file upload container on a page, in the standard styling it will be presented as follows:

Configure the connection

To be able to handle files, a connection has to be specified. This connection states where the files should be stored. See How to setup a connection.

Also check that your messages properties filecontains the following lines:

#fileupload
fileupload.label.single=Add file...
fileupload.label.multi=Add files...
fileupload.description.filesize=Maximum file size is: {0}
fileupload.description.extension=Allowed file extensions are: {0}
fileupload.validation.extension=File type not allowed
fileupload.validation.filesize=File is too large
fileupload.status.succes=File(s) uploaded successfully
fileupload.status.failed=Upload failed because the following file(s) do not meet all conditions:

Create a multiple File Upload

Follow the steps below to model a multiple file upload:

  1. Define a connection name as described before.

  2. Create an entity, e.g. 'File', in your model.
  3. Create at least one attribute: File.Id. This attribute is needed to store the id of the file, and without this attribute this functionality does not work. When handling files it is often practical to use a few other attributes such as File.Name, File.Type and File.Size. Create these attributes too.
  4. Create an exposed flow.
  5. Create a page which is put in the flow and is connected.
  6. Create a container of type AQ_File_Upload and place it on the page with the following parameters. For more information on the parameters of this container see the Container type: AQ_File_Upload.

    ParameterValue
    Connection<connection name>
    PersistenceTemporary
    ModeMultiple files
    FileIDFile.Id
    FileNameFile.Name
    FileTypeFile.Type
    FileSizeFile.Size
  7. Create a container of type AQ_InstanceList.
    1. Let the containment be: File.Id, File.Name, File.Type, File.Size, all of them read-only
    2. Let the parameters be: Parameter 'entity' should be 'File'.
  8. Let the instance selector container be the second container on the page.
  9. The upload container is ready to use.

It is possible to extend this list with some custom meta data fields. These can be created and updated by using the AQ_File_UpdateMetaData service.

Create a download service

To use the download file container, first create a text item with the name 'DownloadText' and enter some text, e.g. Download.

Create a AQ_File_Download container and add the following parameters:

ParameterValue
Connection<connection name>
FileIdFile.Id
ButtonTextDownloadText

This container can be used in the containment of the instance list and it is ready to use.

Create a delete service

To be able to delete a file you need a service for that. Create a new service of type AQ_File_Delete. Enter the following parameters:

ParameterValue
Connection<connection name>
FileIdFile.Id
RemoveInstanceTrue

This service can be used in the flow when a delete event is triggered. This service can be used directly.

Create an update meta data service

Next to the default meta data that are stored, it is possible to define some of your own. These can be specified in the CustomMetaData parameter of the Service call type: AQ_File_UpdateMetaData service. This is an example with one meta data.

ParameterValue
Connection<connection name>
FileIdFile.Id
CustomMetaDataMeta = File.Meta

The previous steps are needed for a simple and complete application. The following services and constructs can be used in more specific situations.

Get meta data service

Is is possible to retrieve the meta data when providing an Id.

ParameterValue
Connection<connection name>
FileIdFile.Id
FileNameFile.Name
FileTypeFile.Type
FileSizeFile.Size

Move a File

By using the AQ_File_Move it is possible to move a file from one connection to another connection. This could be useful when uploading to memory by default, adding some meta data and storing it on the file system afterwards. This service can be used by entering the following parameters.

ParameterValue
ConnectionFrom<connection name from one system>
ConnectionTo<connection name to another system>
FileIdFile.Id

Trigger a flow when uploading

There could be a need for directly triggering a flow when uploading a file. This could be useful when calling some services for setting information.

To be able to do this follow theses steps:

  • Add an event, e.g. 'AutomaticUpload'.
  • Add this event to the expected events of the AQ_File_Upload in the tab 'Events'.
  • Connect a service in the flow which is connected to this event.

Every time a new file is uploaded, this exit event will be taken.

Example application

See the file upload example project.