(fix) O3-3627: Hide filetype extension for image attachment #2071
Conversation
|
Could you include a bump for the framework as part of your changes now that openmrs/openmrs-esm-core#1183 got checked in? |
|
Thanks @denniskigen let me work on that |
|
@denniskigen With the changes this is what happens I blocked out any attempt to of having a dot or comma |
| const fileExtension = uploadedFile.fileName.match(/\.[^/.]+$/)?.[0] || ''; | ||
| const [fileName, setFileName] = useState(uploadedFile.fileName.replace(/\.[^/.]+$/, '')); // Display name without extension |
There was a problem hiding this comment.
| const fileExtension = uploadedFile.fileName.match(/\.[^/.]+$/)?.[0] || ''; | |
| const [fileName, setFileName] = useState(uploadedFile.fileName.replace(/\.[^/.]+$/, '')); // Display name without extension | |
| const fileExtension = uploadedFile.fileName.match(/\.[^\\/.]+$/)?.[0] || ''; | |
| const [fileName, setFileName] = useState(uploadedFile.fileName.replace(/\.[^\\/.]+$/, '')); // Display name without extension |
packages/esm-patient-attachments-app/src/camera-media-uploader/file-review.component.tsx
Outdated
Show resolved
Hide resolved
| @@ -88,10 +88,13 @@ const MediaUploaderComponent = () => { | |||
| </div> | |||
| )} | |||
| <p className="cds--label-description"> | |||
| {t('fileUploadSizeConstraints', 'Size limit is {{fileSize}}MB', { | |||
| {t('fileUploadSizeConstraints', 'Size limit is {{fileSize}}MB.', { | |||
There was a problem hiding this comment.
| {t('fileUploadSizeConstraints', 'Size limit is {{fileSize}}MB.', { | |
| {t('fileUploadSizeConstraints', 'Size limit is {{fileSize}}MB', { |
There was a problem hiding this comment.
It's better not to include punctuation in translation strings and it's not clear to me that the period is useful here. (Keep in mind changing the English text of a translation invalidated every existing translation of this string).
In this case, I would just wrap both clauses in a <p> element so they are on separate lines.
| @@ -28,7 +28,7 @@ export function createGalleryEntry(data: AttachmentResponse): Attachment { | |||
| return { | |||
| id: data.uuid, | |||
| src: `${window.openmrsBase}${attachmentUrl}/${data.uuid}/bytes`, | |||
| filename: data.filename, | |||
| filename: data.filename.replace(/\.[^/.]+$/, ''), | |||
There was a problem hiding this comment.
Why are we removing the extension here?
There was a problem hiding this comment.
createGallary Function passes the AttachmentResponse data of file details to attachment type which is used by the UI components ie the attachments-overview-component, and the grid and table components. These components all use the filename from the Attachment type and filename comes with the extension.
Before
After
There was a problem hiding this comment.
Be nice to have a comment explaining things.
denniskigen
changed the title
|
@denniskigen from earlier discussions I have reverted the logic to restrict the dot and the comma. Also tested out the add image in the visit not and works well the image is added in the attachment gallary. |
|
@denniskigen and @ibacher In my final iterations I have added a sanitize function which removes any duplicate filetype extensions if typed by user such that the original filetype is maintained as the only one. |
|
@denniskigen not quite sure why this e2e test is failing for the success notification |
Requirements
Summary
I am hiding away the filetype extension from being displayed in the UI but is still maintained when the attachment is saved to the server. Also to restrict users from adding duplicate filetype extension I have restricted the user from typing a dot [.] in the filename field.
Screenshots
Screencast.from.22-10-24.00.02.57.webm
Screencast.from.21-10-24.23.56.18.webm
Related Issue
https://openmrs.atlassian.net/browse/O3-3627
openmrs/openmrs-esm-core#1183
Other
In this I only was able to hide the filetype extension form user but still one other issue I believe solved by this PR here. The filename input by user is not what is saved and displayed but the default filename. From the attachment videos above you can realize that, the however much I update the filename the default is still maintained which is not desired. This is so because in the filename appended is from the default file object in the uploadedfile type not the filename.