Uploaded image for project: 'OpenMRS 3.x Frontend'
  1. OpenMRS 3.x Frontend
  2. O3-1447

Patient attachments modal UI fixes



    • Bug
    • Status: Done
    • TBD
    • Resolution: Fixed
    • None
    • None
    • Patient Chart
    • None


      Patient attachments modal fixes/updates

      August 9, 2022 → August 12, 2022

      Restructure the files and remove the previous files


      Before all the camera-upload component is placed in the same folder with the patient attachments overview component. Along with this, camera capture component file is also having multiple components in a single file. So, now I need to de-cluster all these components and move the components in either a new file or a new folder.

      Add autoFocus on delete modal


      Currently, if we want to delete an attachment, we get a modal for confirmation and we have to click the Delete button to delete it. For faster work, I'll add an autoFocus to the Delete button, so that if the user wants to delete it, they can directly click enter, instead of bringing the mouse to the delete button and then clicking it.

      Retain the image ratio on the upload preview


      Currently, when we upload an image and go to the preview section to enter the image name and description, the image resizes itself to match the parent width and height and distorts the ratio.

      Button width fix


      Right now, the button sets are having buttons not stretched to it’s parent’s width. Image attached.

      Upload media

      File name and image name


      When we upload an image, then we can see the input’s label as Image name but in case of a file, we still see it as Image name, which needs to be changed from Image name → File Name.

      Uploading file instead of URI


      Currently, we are sending the base64content to the backend to store the image, which needs to be fixed to be able to send a file object instead. This is crucial for faster uploads.

      Uploading caption


      Currently the description is not getting stored in the backend. The file name takes the place of the file caption, but we need to make the file name to be sent as the file name and the file description to be sent as file caption instead.

      File Uploader

      Multiple/ Single file acceptance


      Currently, the media uploader allows multiple files to be uploaded, and since the same modal is being used to upload the patient image, hence we need to make the extension which allows multiple/ single file uploading, based on the prop passed on.

      Max 10 MB file limit check


      We don’t have any file size check in place, hence we need to put the check for max file size of 10MB, which is the file limit by Tomcat, as was informed by Ian.

      File acceptance


      The modal extension allows only Image/ PDF files to upload, but it needs to be updated to either accepting all the files or the file extension passed as props.

      Camera capture button


      Currently the capture button on the camera goes off the view port for some devices, due to the max width and height limit set on the camera frame.

      Capture button visible

      Capture button not visible

      File uploader item width should be same for all.


      Different width of file Uploader item on the screen.

      Infinite uploading issue on the dev3

      Critical fix

      Same file on uploading, is getting uploading continously on dev3. which was working all fine on the local system but broke on the dev3. Have to look into this issue too.

      Link to the notion template: https://tasteful-direction-1b1.notion.site/Patient-attachments-modal-fixes-updates-515de05218ca46ffbf581613185b83ac

      Gliffy Diagrams




              vasharma05 Vineet Sharma
              vasharma05 Vineet Sharma
              0 Vote for this issue
              1 Start watching this issue