Create UI: change multi file input design

[severinbeauvais]

The old (current) design is to provide an additional file input component to add more files:

However, the above may be confusing to users as it may suggest that additional files must be uploaded.

The new design is to simply have a button to add a document, one at a time (up to 5):

This change needs to be approved by the PO, and I recommend a quick POC to see if there are any technical limitations that may favour the current design.

As there is a bug (#22612) in the current multi file upload component(s), THIS ticket could be worked on at the same time or even replace the BUG ticket.

[severinbeauvais]

@janisrogers , FYI.

[severinbeauvais]

Olga approved this for work on Sep 26.

[severinbeauvais]

Test Screenshots

When no documents are uploaded (and validation is enabled).

When some documents are uploaded.

When there's a document error.

Responsive view.

[janisrogers]

I couldn't mimic the document error state.

• [x] If I upload a different file type (like a spreadsheet), it doesn't give me an error, it just quietly fails. Can we display an error for that?
• [x] If I upload a large file, there is no indication that it is working. Would it be possible to add a spinner to replace the 'Add a Document' button while it is busy?
• [x] On a related note, while I am uploading a file, I can begin the upload of another. This allowed me to upload a sixth document.

Everything else looks great!

[severinbeauvais]

Good catch! Working on it...

[severinbeauvais]

Test Cases

1. try to add a PDF file that isn't a PDF file -> "Invalid PDF file."
2. try to add an encrypted PDF file -> "File must not be encrypted."
3. try to add a locked PDF file -> "File content cannot be locked."
4. try to add a file greater than 30 MB -> "Exceeds maximum 30 MB file size."
5. try to add a file without a ".pdf" extension -> "Invalid file extension."
6. add a valid document then try to add it again -> "Duplicate file."
7. click to add a document then cancel the file dialog -> no change
8. add a large file (or slow the network down via dev tools) -> see spinner on button + can't click Add button again
9. remove an uploaded document -> document is removed
10. enable validation with no files -> red text
11. enable validation with at least 1 file -> normal text
12. add 5 files -> Add button is grayed out

[severinbeauvais]

OK, OK, it's all fixed now. I promise.

Please give it a couple of minutes to deploy to Dev then try again.

https://dev.create.business.bcregistry.gov.bc.ca/continuation-in-business-home?id=TZYacM9KPv

[severinbeauvais]

@riyazuddinsyed Please verify that the file uploads work correctly in other Create UI filings where files are uploaded. Thx.

[janisrogers]

UX looks good. Ready for QA