Add media type sniffing by extension

packages/frontend/src/FileReducer.ts

@@ -1,3 +1,4 @@
+import { getMediaTypeForFile } from "common/MediaType";
 import { mapProp, Update } from "./store";
 
 export function FileReducer(prev: FileReducer.State, action: FileReducer.Action): FileReducer.State {
@@ -7,10 +8,10 @@ export function FileReducer(prev: FileReducer.State, action: FileReducer.Action)
 		case "file":
 			if (prev.file !== null) {
 				if (action.file !== null) {
-					if (prev.file.name === prev.filename && prev.file.type === prev.mediaType) {
+					if (prev.file.name === prev.filename && getMediaTypeForFile(prev.file) === prev.mediaType) {
 						return Object.freeze<FileReducer.State>({
 							filename: action.file.name,
-							mediaType: action.file.type,
+							mediaType: getMediaTypeForFile(action.file),
 							file: action.file,
 						});
 					} else {
@@ -28,7 +29,7 @@ export function FileReducer(prev: FileReducer.State, action: FileReducer.Action)
 					if (prev.filename === "" && prev.mediaType === "") {
 						return Object.freeze<FileReducer.State>({
 							filename: action.file.name,
-							mediaType: action.file.type,
+							mediaType: getMediaTypeForFile(action.file),
 							file: action.file,
 						});
 					} else {

packages/frontend/src/routes/Piece.tsx

@@ -1,5 +1,6 @@
 import type { Attachment, Piece } from "backend/database";
 import { AttachmentId, PieceId } from "common";
+import { ACCEPTED_EXTENSIONS } from "common/MediaType";
 import { ELYSIA_FORM_DATA } from "elysia";
 import { FormEventHandler, useId, useReducer, useRef, useState } from "react";
 import { Link, useParams } from "react-router-dom";
@@ -254,6 +255,7 @@ function AttachmentForm(props: AttachmentForm.Props) {
 					const file = e.target.files?.item(0) ?? null;
 					reduce(FileReducer.setFile(file));
 				}}
+				accept={ACCEPTED_EXTENSIONS}
 			/>
 			<Button type="submit">
 				Dodaj