Enhance File Upload Dialog with Image 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:

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

[modamaan]

@rithviknishad #10031 , #10032 i would like raise single PR for these 2 issues