Improve MIME type handling on File Upload and in Message Component

[Thumbscrew]

Description

Currently if you upload a file with MIME type prefixes video/, audio/ or image/ that is not in the ALLOWED_BLOB_MIMETYPES the file type will be converted to application/octet-stream by getBlobSafeMimeType. However, the React element used to display the file in the timeline is still a video, audio or image element. This appears to cancel the file upload and the file attachment shelf gets stuck on the screen.

Changes:

• Move allowed MIME types to dedicated util file
• Check that file type being uploaded is in the allowed blobs, if not upload as m.file
• When building the Message component, check that the file is in the allowed blobs otherwise treat it as a generic file

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings

Preview: https://62f67680a954bc0932c98961--pr-cinny.netlify.app
⚠️ Exercise caution. Use test accounts. ⚠️

[Thumbscrew]

You can test this by uploading an .mkv file which has MIME type video/x-matroska which is not in the allowed blobs list. Before this change, the upload shelf would get stuck and the file would not upload. Now it should upload as a generic file.