perf: stream file uploads

Author: kentcdodds

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

@@ -1,7 +1,7 @@
 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 { parseFormData } from '@mjackson/form-data-parser'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import { useState } from 'react'
 import { data, redirect, Form, useNavigation } from 'react-router'
@@ -12,7 +12,6 @@ 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,
@@ -67,11 +66,7 @@ export async function loader({ request }: Route.LoaderArgs) {
 export async function action({ request }: Route.ActionArgs) {
 	const userId = await requireUserId(request)
 
-	const formData = await parseFormData(
-		request,
-		{ maxFileSize: MAX_SIZE },
-		async (file: FileUpload) => uploadHandler(file),
-	)
+	const formData = await parseFormData(request, { 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,11 +1,10 @@
 import { parseWithZod } from '@conform-to/zod'
-import { type FileUpload, parseFormData } from '@mjackson/form-data-parser'
+import { parseFormData } from '@mjackson/form-data-parser'
 import { createId as cuid } from '@paralleldrive/cuid2'
 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 { uploadNoteImage } from '#app/utils/storage.server.ts'
 import {
 	MAX_UPLOAD_SIZE,
@@ -21,18 +20,16 @@ function imageHasFile(
 
 function imageHasId(
 	image: ImageFieldset,
-): image is ImageFieldset & { id: NonNullable<ImageFieldset['id']> } {
-	return image.id != null
+): image is ImageFieldset & { id: string } {
+	return Boolean(image.id)
 }
 
 export async function action({ request }: ActionFunctionArgs) {
 	const userId = await requireUserId(request)
 
-	const formData = await parseFormData(
-		request,
-		{ maxFileSize: MAX_UPLOAD_SIZE },
-		async (file: FileUpload) => uploadHandler(file),
-	)
+	const formData = await parseFormData(request, {
+		maxFileSize: MAX_UPLOAD_SIZE,
+	})
 
 	const submission = await parseWithZod(formData, {
 		schema: NoteEditorSchema.superRefine(async (data, ctx) => {

app/utils/file-uploads.server.ts

@@ -14,7 +14,7 @@ async function uploadToStorage(file: File | FileUpload, key: string) {
 	const uploadResponse = await fetch(url, {
 		method: 'PUT',
 		headers,
-		body: file instanceof File ? file : Buffer.from(await file.arrayBuffer()),
+		body: file instanceof File ? file : file.stream(),
 	})
 
 	if (!uploadResponse.ok) {
@@ -169,3 +169,15 @@ function getSignedPutRequestInfo(file: File | FileUpload, key: string) {
 		},
 	}
 }
+
+export function getSignedGetRequestInfo(key: string) {
+	const { url, baseHeaders } = getBaseSignedRequestInfo({
+		method: 'GET',
+		key,
+	})
+
+	return {
+		url,
+		headers: baseHeaders,
+	}
+}