(fix) O3-3682 - Refactor File Picker Component and Fix Multiple Selection Support

[suubi-joshua]

Requirements

• This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.
• My work conforms to the OpenMRS 3.0 Styleguide and design documentation.
• My work includes tests or is validated by existing tests.

Summary

This PR refactors the file picker component in the form engine to align with standard input design and improve functionality. The handleFilePickerChange function now supports multiple file selections, allowing users to upload multiple files by appending them to the existing value using the field.questionOptions.allowMultiple configuration. The component also displays previews for all selected files, integrates camera capture functionality with live preview and upload options, and addresses previous limitations in file selection and usability, ensuring a consistent and enhanced user experience.

Screenshots

Screencast.from.27-11-24.18.06.45.webm

Related Issue

https://openmrs.atlassian.net/browse/O3-3682

Other

[samuelmale]

Thanks for the PR @suubi-joshua! Just a couple of concerns:

1. Can you attach screenshots or a short video as a visual aid for the reviewers?
2. Can you add unit tests for your changes?

[suubi-joshua]

Thanks for the PR @suubi-joshua! Just a couple of concerns:

1. Can you attach screenshots or a short video as a visual aid for the reviewers?

2. Can you add unit tests for your changes?

@samuelmale I made some changes and added that video. Remaining with unit test.

[suubi-joshua]

@samuelmale should the uploads from the file components show up in the attachments preview section?

[samuelmale]

should the uploads from the file components show up in the attachments preview section?

@suubi-joshua By attachments preview section do you mean the "Attachments dashboard" on the patient chart? If so, yes! and I believe that's already working.

If you meant a backed-in preview (within the form) on file selection; Yes! Right now, there is no preview of the uploaded file. In a context where we have multiple selections, we can't preview all the selected files at once; we could do something like:

Alternatively, we could seek UX advisory

---

Generally, we need to refine the UX of our file picker for more practicality.

[suubi-joshua]

@samuelmale thanks for that clarification, I needed clarification on both previews.

[suubi-joshua]

should the uploads from the file components show up in the attachments preview section?

@suubi-joshua By attachments preview section do you mean the "Attachments dashboard" on the patient chart? If so, yes! and I believe that's already working.

If you meant a backed-in preview (within the form) on file selection; Yes! Right now, there is no preview of the uploaded file. In a context where we have multiple selections, we can't preview all the selected files at once; we could do something like:

Alternatively, we could seek UX advisory

Generally, we need to refine the UX of our file picker for more practicality.

@samuelmale happy new year this brings a new thought in my mind. Can we consider refactoring this to have it function the way the visit-note form works
Have one button which can say Upload file, the button launches the attachments modal.
ie

Screencast.from.09-01-25.15.41.38.webm

[samuelmale]

I like the idea and agree we need to refactor and refine the entire UX; can you seek UX advisory?

[gracepotma]

Feedback provided in slack: https://openmrs.slack.com/archives/CKS32D55G/p1736830786512069?thread_ts=1736795272.053099&cid=CKS32D55G
Thank you! <3

[suubi-joshua]

Screencast.from.27-01-25.14.46.07.webm

I have been successfull in refactoring the file picker component to make it similar to the visit note file uploader button. I am using attachments module. The blocker am currently facing is how to save the files uploaded from this new format to the backend. The saveAttachment function in the RFE expects a file in a different format. I want to reuse the createAttachment function in the attachments module in the saveAttachment function.

[samuelmale]

• I see you're getting an "index out of bounds" error, is this coming from the server?

• Why does submitting the "Add Attachment" dialogue yield snack bar(s) entitled "Upload complete"? Shouldn't this happen on encounter submission?

[suubi-joshua]

• I see you're getting an "index out of bounds" error, is this coming from the server?

  • Why does submitting the "Add Attachment" dialogue yield snack bar(s) entitled "Upload complete"? Shouldn't this happen on encounter submission?

Yes this is coming from the server
I noted when using the attachments modules it happens whenever an image is uploaded after the attachment modal closes. But ideally its meant to happen on encounter submission