[feat] Allow use of mime-types in file router config (#135)

Co-authored-by: Theo Browne <[email protected]>

.changeset/warm-rivers-appear.md

@@ -0,0 +1,5 @@
+---
+"uploadthing": patch
+---
+
+[feat] Allow use of mime-types in file router config

packages/react/src/component.tsx

@@ -35,7 +35,10 @@ const INTERNAL_doFormatting = (config?: ExpandedRouteConfig): string => {
 
   const allowedTypes = Object.keys(config) as (keyof ExpandedRouteConfig)[];
 
-  const formattedTypes = allowedTypes.map((f) => (f === "blob" ? "file" : f));
+  const formattedTypes = allowedTypes.map((f) => {
+    if (f.includes("/")) return `${f.split("/")[1].toUpperCase()} file`;
+    return f === "blob" ? "file" : f;
+  });
 
   // Format multi-type uploader label as "Supports videos, images and files";
   if (formattedTypes.length > 1) {

packages/uploadthing/client.ts

@@ -55,7 +55,10 @@ export const DANGEROUS__uploadFiles = async <T extends string>(
 
     // Give content type to blobs because S3 is dumb
     // check if content-type is one of the allowed types, or if not and blobs are allowed, use application/octet-stream
-    if (presigned.fileType === file.type.split("/")[0]) {
+    if (
+      presigned.fileType === file.type.split("/")[0] ||
+      presigned.fileType === file.type
+    ) {
       formData.append("Content-Type", file.type);
     } else if (presigned.fileType === "blob") {
       formData.append("Content-Type", "application/octet-stream");

packages/uploadthing/src/internal/handler.ts

@@ -2,10 +2,10 @@ import type { NextApiResponse } from "next";
 
 import { UPLOADTHING_VERSION } from "../constants";
 import type {
-  AllowedFileType,
   AnyRuntime,
   ExpandedRouteConfig,
   FileRouter,
+  FileRouterInputKey,
   UploadedFile,
 } from "../types";
 import {
@@ -42,28 +42,26 @@ const fileCountLimitHit = (
   files: string[],
   routeConfig: ExpandedRouteConfig,
 ) => {
-  const counts: Record<AllowedFileType, number> = {
-    image: 0,
-    video: 0,
-    audio: 0,
-    text: 0,
-    pdf: 0,
-    blob: 0,
-  };
+  const counts: { [k: string]: number } = {};
 
   files.forEach((file) => {
     const type = getTypeFromFileName(
       file,
-      Object.keys(routeConfig) as AllowedFileType[],
-    );
-    counts[type] += 1;
+      Object.keys(routeConfig) as FileRouterInputKey[],
+    ) as FileRouterInputKey;
+
+    if (!counts[type]) {
+      counts[type] = 1;
+    } else {
+      counts[type] += 1;
+    }
   });
 
   return Object.keys(counts).some((key) => {
-    const count = counts[key as AllowedFileType];
+    const count = counts[key as FileRouterInputKey];
     if (count === 0) return false;
 
-    const limit = routeConfig[key as AllowedFileType]?.maxFileCount;
+    const limit = routeConfig[key as FileRouterInputKey]?.maxFileCount;
     if (!limit) {
       console.error(routeConfig, key);
       throw new Error("invalid config during file count");