Upload multiple files / photos at one click

Environment:

html5, master-latest

Context

In our project we need to upload multiple photos to one instance of object. So we have parent-child relationship:

  • ServiceOrder
  • Photos (Attachments) - each photo belongs to ServiceOrder

We need to allow that user can add multiple photos at once.

Current solution

  1. User finds an ServiceOrder
  2. In child Screen Section the user clicks Add button
  3. User selects photo on the disk
  4. User clicks Add button again
  5. … (repeat as many times as many photos user needs to add)

Requirement

  • Generally, User has multiple photos to upload for any ServiceOrder
  • Photos are important part of the service order documentation and it must be as easy as possible that user can add new photos

Suggested behaviour

  • Allow to select multiple files for upload - allow to use this component in screen section
  • Use this upload component only in Workflow
  • We can then create workflow Add photos:
    1. Select multiple files on the disk
    2. Add general information common for all the photos
    3. Use xslt transformation to add photos into proper table

Addtional Questions

  1. There could be a problem with performance when uploading multiple photos. So how to ensure that the user can see the progress of upload and the upload might be asynchronous?
    • Or there might be an asynchronous table for attachments to process them and relate them to certain entity and with xslt transformation those attachments could be transform into the proper table