(feat): O3-3685: Enable Deleting or Clearing Files in File Picker Component in Edit Mode

[lucyjemutai]

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

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

Screenshots

screen-recording-2024-12-19-at-115242_rgC1F8Gn.mov

Related Issue

Other

[lucyjemutai]

hey @samuelmale Please review this. Thanks

[samuelmale]

@lucyjemutai Thanks for working on this! However, can we get some UX design advisory on how to refine the UI? In the demo, the delete button renders before the target blob. It also appears to render twice. Is it some kind of preview or thumbnail?

[UNCANNY69]

Hi @lucyjemutai as @samuelmale has mentioned there is dual rendering of the images that are being uploaded one in the attachmentContainer (with the trash can icon) other in editModeImage (as a preview), in my suggestion it would be better to have the editModeImage removed and modify the attachmentContainer post this the discussion on the UX-design channel can made in the channel.

Suggested change

	{value && !isViewMode(sessionMode) && (
	<div className={styles.attachmentContainer}>
	{(Array.isArray(value) ? value : [value]).map((file, index) => (
	<div key={index} className={styles.attachmentPreview}>
	{file.bytesContentFamily === 'PDF' ? (
	<div className={styles.pdfThumbnail}>
	<DocumentPdf size={24} />
	</div>
	) : (
	file.src && <img src={file.src} alt="Preview" width="200px" />
	)}
	<div className={styles.trashCanContainer}>
	<span className={styles.trashTooltip}>{t('clearFile', 'Clear file')}</span>
	<TrashCan className={styles.trashIcon} onClick={handleDeleteAttachment} size={20} />
	</div>
	</div>
	))}
	</div>
	)}
	{value && !isViewMode(sessionMode) && (
	<div className={styles.attachmentContainer}>
	{(Array.isArray(value) ? value : [value]).map((file, index) => (
	<div key={index} className={styles.attachmentPreview}>
	{file.bytesContentFamily === 'PDF' ? (
	<div className={styles.pdfThumbnail}>
	<DocumentPdf size={24} />
	<div className={styles.trashCanContainer}>
	<span className={styles.trashTooltip}>{t('clearFile', 'Clear file')}</span>
	<TrashCan
	className={styles.trashIcon}
	onClick={handleDeleteAttachment}
	size={20}
	aria-label={t('clearFile', 'Clear file')}
	role="button"
	tabIndex={0}
	/>
	</div>
	</div>
	) : (
	file.src && (
	<div className={styles.imagePreview}>
	<img src={file.src} alt="Preview" width="200px" />
	<div className={styles.trashCanContainer}>
	<span className={styles.trashTooltip}>{t('clearFile', 'Clear file')}</span>
	<TrashCan
	className={styles.trashIcon}
	onClick={handleDeleteAttachment}
	size={20}
	aria-label={t('clearFile', 'Clear file')}
	role="button"
	tabIndex={0}
	/>
	</div>
	</div>
	)
	)}
	</div>
	))}
	</div>
	)}