Multiple issues with validateFileUpload function in src/patient/fileUpload.ts

[kabirrajsingh]

Describe the bug
The validation function could be rewritten to ensure more reliability.
To Reproduce
Steps to reproduce the behavior:

1. Go to 'facility/:facilityId/patient/patientId/files/'
2. Click on 'Choose File'
3. Issue1-
   a. Try to upload a file with some extension like .exe
   b. Notice that the validateFileUpload function actually returns true in this case and later on while actually making the api call to /api/v1/files we get the error that the filetype is inaccurate, the expected behavior here should be to reject the file when it is getting uploaded in the first place instead of sending it over to the fileupload api to reduce unneccesary api calls.
   Issue2-
   a. Try changing the file extension of some .exe to .pdf
   b. It will get uploaded normally, this should not be the case, the filetype only gets validated via the extension whereas a more reliable mechanism should be used to verify the filetype.
   Issue3-
   a. After uploading an unsupported file type and getting the error when we click on the cross button, the form fields get grayed out, it should get reset instead

Expected Behavior

• When an invalid format file is selected, the upload button should be grayed out, and an error message should be shown in the frontend indicating that it is an invalid format.

make sure this same behavior is applicable in patient consultation page and patient files as well

steps to enter patient consultation file

1. go to the patient tab
2. select any patient with active consultation
3. now from the nav bar under-diagnosis card, select the files
4. try to upload the .exe file and see the error

steps to enter patient files

5. after the above steps, in the top right corner, select the patient details button
6. then select the upload patient files
7. try to upload the .exe file and see the error

Screenshots

[kabirrajsingh]

@vigneshhari @rithviknishad please check the issue and let me know if I can work on it

[kabirrajsingh]

I was thinking of using file signature checks via the file header to resolve the unsupported file type upload problem.
For this I needed to know what are the file types that we are expecting to return a positive validation?
I was thinking of including .png, .jpeg, .jpg, .mp3, .midi, .wav, .pdf formats. Any other format which I need to consider?

[kabirrajsingh]

@khavinshankar @sainak could you please check it once

[github-actions]

Hi, @coronasafe/care-frontend-maintainers, This issue has been automatically marked as stale because it has not had any recent activity.

[gigincg]

@nihal467 Can you verify if this is still an issue?

[nihal467]

@gigincg the issue still exists, added some comment related to the expected behavior as well

[gigincg]

@nihal467 @shivankacker Are these being solved in the File Upload Refactor?

[shivankacker]

@gigincg

Issue 1 : The new mechanism checks for the file type before making an API call.

Issue 2: Masking a non valid file as a valid file works, but do we need to implement a check for this? I don't know if it is really required.

Issue 3: The new component does not have this issue.

[gigincg]

@shivankacker Are we using the accept prop for the input?

Refer: https://stackoverflow.com/questions/4328947/limit-file-format-when-using-input-type-file

[shivankacker]

@gigincg we are, but it looks like it got broken somewhere during the refactor
#8419 this should fix it