Enhance File Upload Dialog with PDF Preview for Better File Identification

[modamaan]

Describe the bug
In the patient file upload dialog, only the file name is displayed after selecting a file for upload. This makes it difficult for users to identify the selected file, especially when dealing with multiple images or files with similar names. The lack of an image preview creates uncertainty about whether the correct file was selected before uploading.

To Reproduce
Steps to reproduce the behavior:
Click to reproduce

1. Go to 'Encounters button on sidebar'
2. Click on 'Click any 'View Details' button on a card.'
3. go to 'files and click upload files from device'
4. See error

Expected behavior
When a file is selected for upload in the patient file upload dialog, a thumbnail preview of the file should be displayed (for image files) alongside the file name. This would allow users to easily verify the file they have selected, ensuring it is the correct one before proceeding with the upload. For non-image files, relevant file details (such as type or size) should be shown to assist in identifying the file. This feature should improve user confidence and reduce the likelihood of incorrect file uploads.

Screenshots

before

Expect

Desktop (please complete the following information):

• OS: [windows]
• Browser [chrome]
• Version [131.0.6778.109]

Additional context
Add any other context about the problem here.

[modamaan]

@rithviknishad @Jacobjeevan i would like take it up

[Jacobjeevan]

Hmm, I am not sure this is needed 🤔 But if we are going to do this, we would also need to handle multiple file uploads (stacking them will not look great, probably will have to do something like the existing image viewer after upload, similar to logic in FilePreviewDialog).

cc: @rithviknishad

[bodhish]

Lets not have it; We will have different kinds of uploads over time and this would be something that needs to be maintained over time.

@Jacobjeevan @rithviknishad