Replace Remix's unstable_parseMultipartFormData with @mjackson/form-data-parser

00:00 Remix comes with a built-in function for uploading files called UnstableParseMultipartFormData. One alternative is the MJackson form data parser package built by Michael Jackson from the Remix team which has a similar API and I'm going to show you how to use it to create a drop-in

00:17 replacement for the UnstableParseMultipartFormData function. Actually if you don't care about the max upload size, this works automatically. We can just comment this out. Let's go const formData

00:32 equals await parseFormData. Let's take the request and this just works out of the box. We can edit. Let's upload a green koala. Submit and the upload works right away.

00:48 But the parseFormData function doesn't have a built-in feature for setting a max file size. So we're going to need to create a custom upload handler where we stream the chunks into an array and then we return a new file with the chunks.

01:07 Let's go file.name and we need the content type is file.type. In order to fill this array, we can open up a stream on the file and this is a readable stream so it'll have a getReader

01:24 and then while true we can await reader.read. Let's see this needs to be an async function. Async function. This gives us done and value. If we are done,

01:41 break out of the loop. Otherwise chunks.push value. This essentially recreates what we had at the start when we weren't using a custom upload handler. But now that we are, implementing the max file size just means counting chunks

01:57 and breaking out of the loop if we hit the limit. We do let size equals zero and then while size is less than or equal to max upload size and then every time we push,

02:12 we just add the length of the value to size. So this will naturally count up as we push to the chunks array. Now we can change our max upload size down to three kilobytes and if we try to upload, we should get an error.

02:38 Submit file size must be less than three kilobytes. Now that the file upload works, I really like this API for the create memory upload handler that we had with the old one.

02:50 So let's copy that. Let's go function create memory upload handler. That's going to need options as max part size which is a number. Yeah and let's default that to infinity.

03:09 So the implementation is this whole thing. Copy the whole thing, paste it into here. So we don't have type inference anymore so we'll have to do this. This is a file upload

03:25 from the form data parser package. So that's good and we need to replace max upload size with options dot max part size. So now we can copy max part size is max upload size.

03:51 And let's try one more koala. Great, great. So to recap, we started out with this unstable parse multi-part form data function. We re-implemented it using the mjaxon parse form data package. And then we created our

04:08 own memory upload handler that supports a max upload size to create a drop-in replacement for any app that's using the existing parse multi-part form data functions from Remix.