(feat)O3-2210: Add support for file picker to form engine

[jona42-ui]

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

Added a file component and schema update to include the required questionOption for rendering files, including specifications such as maximum allowed file size and allowed file types (e.g., .jpg). like

1. Single File Attachments
2. Multiple file attachments
   Implented a preview feature for files that are yet to be uploaded.

Screenshots

Related Issue

O3-2210

Other

[jona42-ui]

cc @samuelmale @eudson @donaldkibet @ibacher @denniskigen @vasharma05

[jona42-ui]

Screencast.from.21-08-23.11.59.03.webm

[jona42-ui]

Hello
It seems the form data is not persisted to the server.
On form submission, all seems well on the network tab yet actually no encounter is created.

1. do we have an API endpoint that accepts file uploads in the forms?

[samuelmale]

@jona42-ui did you intend to pickup where @donaldkibet left off with #88?

do we have an API endpoint that accepts file uploads in the forms?

@donaldkibet mentioned to me while in Abuja that the missing piece in the puzzle was figuring out how to persist the attachments without depending on the attachments module. @donaldkibet do you wanna share your findings?

@ibacher @mogoodrich does the WS/REST module support Complex Obs out of the box? If so, is this our best shot?

[jona42-ui]

@jona42-ui did you intend to pickup where @donaldkibet left with #88?

sure @samuelmale though I needed more of either an editor that opens image files in new tab or a pop up window on annotation then persisting the clinical images with form data on encounter

[ibacher]

does the WS/REST module support Complex Obs out of the box?

It should. REST is generally a pretty thin wrapper around the underlying Java APIs and we certainly support complex obs there. However, correctly creating complex obs is, well, complex. They rely on having an appropriate set of handlers on the backend to work with the data (complex obs are basically stored as a binary string that's interpreted by a handler).

[jona42-ui]

Thanks @ibacher
Are there any specific considerations for incorporating Complex Obs within the context of form handlers and submission processes?
so what i understand is even when we may not use the attachment module, still we can laverage the existing image handler, but utilzing a new endpoint. given maybe other metadata we can have custom handlers then associate with form submitted.

I was thinking to have a utility somewhat like this;

export async function handleFileUpload(fileData, fieldName) {
  try {
    // Adapt the API endpoint for file upload
    const url = '/ws/rest/v1/upload'; // Adjusting  the endpoint as needed

```
    // Create FormData and append the file data
    const formData = new FormData();
    formData.append('file', fileData);

    // Use openmrsFetch to upload the file
    const response = await openmrsFetch(url, {
      method: 'POST',
      body: formData,
    });`
    
  

[jona42-ui]

However, correctly creating complex obs is, well, complex.

abit scary @ibacher but atleast i wanted to persist the images to complete my gsoc project, what advice can you give to me kindly to have something functional. thanks so much.

[jona42-ui]

does the WS/REST module support Complex Obs out of the box?

It should. REST is generally a pretty thin wrapper around the underlying Java APIs and we certainly support complex obs there. However, correctly creating complex obs is, well, complex. They rely on having an appropriate set of handlers on the backend to work with the data (complex obs are basically stored as a binary string that's interpreted by a handler).

@ibacher I had a temporary hack and used the attachment resources to persist the image though this is not the plan for the forms' data to save the images//complex obs.
Are there any initial thoughts/plans to get this implementation kick started?

[ibacher]

@jona42-ui Ultimately, I think using the attachment resource is the right idea here. The trick is to ensure it's attached to the same encounter as the form.

[samuelmale]

Closing this because work is being track at #128