fix: Add stricter validation around image file type uploads (#3324)

* fix: Add stricter validation around image file type uploads

* revert backend restrictions, we want to allow unsupported images as file attachments

app/editor/components/CommandMenu.tsx

@@ -10,6 +10,7 @@ import insertFiles from "@shared/editor/commands/insertFiles";
 import { CommandFactory } from "@shared/editor/lib/Extension";
 import filterExcessSeparators from "@shared/editor/lib/filterExcessSeparators";
 import { EmbedDescriptor, MenuItem } from "@shared/editor/types";
+import { supportedImageMimeTypes } from "@shared/utils/files";
 import getDataTransferFiles from "@shared/utils/getDataTransferFiles";
 import { Dictionary } from "~/hooks/useDictionary";
 import Input from "./Input";
@@ -179,7 +180,7 @@ class CommandMenu<T = MenuItem> extends React.Component<Props<T>, State> {
   insertItem = (item: any) => {
     switch (item.name) {
       case "image":
-        return this.triggerFilePick("image/*");
+        return this.triggerFilePick(supportedImageMimeTypes.join(", "));
       case "attachment":
         return this.triggerFilePick("*");
       case "embed":

shared/editor/nodes/Image.tsx

@@ -11,6 +11,7 @@ import {
 import * as React from "react";
 import ImageZoom from "react-medium-image-zoom";
 import styled from "styled-components";
+import { supportedImageMimeTypes } from "../../utils/files";
 import getDataTransferFiles from "../../utils/getDataTransferFiles";
 import insertFiles, { Options } from "../commands/insertFiles";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
@@ -411,7 +412,7 @@ export default class Image extends Node {
         // create an input element and click to trigger picker
         const inputElement = document.createElement("input");
         inputElement.type = "file";
-        inputElement.accept = "image/*";
+        inputElement.accept = supportedImageMimeTypes.join(", ");
         inputElement.onchange = (event: Event) => {
           const files = getDataTransferFiles(event);
           insertFiles(view, event, state.selection.from, files, {

shared/utils/files.ts

@@ -19,3 +19,21 @@ export const bytesToHumanReadable = (bytes: number) => {
     "  kMGTPEZY"[out.length]
   }B`;
 };
+
+/**
+ * An array of image mimetypes commonly supported by modern browsers
+ */
+export const supportedImageMimeTypes = [
+  "image/jpg",
+  "image/jpeg",
+  "image/pjpeg",
+  "image/png",
+  "image/apng",
+  "image/avif",
+  "image/gif",
+  "image/webp",
+  "image/svg",
+  "image/svg+xml",
+  "image/bmp",
+  "image/tiff",
+];