feat: move to new file uploading package

Author: DennisKraaijeveld

app/routes/settings+/profile.photo.tsx

@@ -1,13 +1,12 @@
 import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { invariantResponse } from '@epic-web/invariant'
+import { type FileUpload, parseFormData } from '@mjackson/form-data-parser'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import { useState } from 'react'
 import {
 	data,
 	redirect,
-	unstable_createMemoryUploadHandler,
-	unstable_parseMultipartFormData,
 	type LoaderFunctionArgs,
 	type ActionFunctionArgs,
 	Form,
@@ -22,6 +21,7 @@ import { Icon } from '#app/components/ui/icon.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { requireUserId } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
+import { uploadHandler } from '#app/utils/file-uploads.server.ts'
 import {
 	getUserImgSrc,
 	useDoubleCheck,
@@ -73,11 +73,12 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
 export async function action({ request }: ActionFunctionArgs) {
 	const userId = await requireUserId(request)
-	const formData = await unstable_parseMultipartFormData(
+
+	const formData = await parseFormData(
 		request,
-		unstable_createMemoryUploadHandler({ maxPartSize: MAX_SIZE }),
+		async (file: FileUpload) => uploadHandler(file),
+		{ maxFileSize: MAX_SIZE },
 	)
-
 	const submission = await parseWithZod(formData, {
 		schema: PhotoFormSchema.transform(async (data) => {
 			if (data.intent === 'delete') return { intent: 'delete' }

app/routes/users+/$username_+/__note-editor.server.tsx

@@ -1,15 +1,11 @@
 import { parseWithZod } from '@conform-to/zod'
+import { type FileUpload, parseFormData } from '@mjackson/form-data-parser'
 import { createId as cuid } from '@paralleldrive/cuid2'
-import {
-	unstable_createMemoryUploadHandler as createMemoryUploadHandler,
-	data,
-	unstable_parseMultipartFormData as parseMultipartFormData,
-	redirect,
-	type ActionFunctionArgs,
-} from 'react-router'
+import { data, redirect, type ActionFunctionArgs } from 'react-router'
 import { z } from 'zod'
 import { requireUserId } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
+import { uploadHandler } from '#app/utils/file-uploads.server.ts'
 import {
 	MAX_UPLOAD_SIZE,
 	NoteEditorSchema,
@@ -31,9 +27,10 @@ function imageHasId(
 export async function action({ request }: ActionFunctionArgs) {
 	const userId = await requireUserId(request)
 
-	const formData = await parseMultipartFormData(
+	const formData = await parseFormData(
 		request,
-		createMemoryUploadHandler({ maxPartSize: MAX_UPLOAD_SIZE }),
+		async (file: FileUpload) => uploadHandler(file),
+		{ maxFileSize: MAX_UPLOAD_SIZE },
 	)
 
 	const submission = await parseWithZod(formData, {

app/utils/file-uploads.server.ts

@@ -0,0 +1,16 @@
+import { type FileUpload } from '@mjackson/form-data-parser'
+
+/**
+ * Handles the upload of a single file and converts it into a File object.
+ *
+ * @param {FileUpload} file - The FileUpload object to process.
+ * @returns {Promise<File>} - A promise that resolves with the converted File object.
+ */
+export async function uploadHandler(file: FileUpload): Promise<File> {
+	const fileContent = await file.arrayBuffer() // Get file content as an ArrayBuffer
+	const fileInstance = new File([fileContent], file.name, {
+		type: file.type,
+		lastModified: file.lastModified,
+	})
+	return fileInstance
+}

package-lock.json

@@ -51,6 +51,7 @@
     "@epic-web/invariant": "^1.0.0",
     "@epic-web/remember": "^1.1.0",
     "@epic-web/totp": "^2.0.0",
+    "@mjackson/form-data-parser": "^0.5.1",
     "@nasa-gcn/remix-seo": "^2.0.1",
     "@paralleldrive/cuid2": "^2.2.2",
     "@prisma/client": "^6.0.1",
@@ -163,4 +164,4 @@
     "seed": "tsx prisma/seed.ts"
   },
   "prettier": "@epic-web/config/prettier"
-}
+}