File uploads and streaming in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the necessary Remix function for handling file uploads.

Remix

import { [1] } from '@remix-run/node';

Drag options to blanks, or click blank then click option'

Ajson

BuploadHandler

CuseLoaderData

Dredirect

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'json' instead of 'uploadHandler'.

Using 'useLoaderData' which is for data loading, not uploads.

The 'uploadHandler' function is imported from '@remix-run/node' to handle file uploads in Remix.

2fill in blank

medium

Complete the code to create an upload handler that stores files in memory.

Remix

const uploadHandler = createUploadHandler({ storage: [1] });

Drag options to blanks, or click blank then click option'

AdiskStorage()

BstreamStorage()

CmemoryStorage()

DfileSystemStorage()

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'diskStorage()' which saves files on disk.

Using 'streamStorage()' which is not a valid storage option.

Using 'memoryStorage()' configures the upload handler to keep files in memory during upload.

3fill in blank

hard

Fix the error in the form data parsing to correctly handle file uploads.

Remix

export const action = async ({ request }) => {
  const formData = await request.[1]();
  const file = formData.get('file');
  // process file
};

Drag options to blanks, or click blank then click option'

AformData

Btext

Cjson

Dblob

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'json()' which fails for file uploads.

Using 'text()' which reads raw text, not form data.

The 'formData()' method parses the request body as form data, which is needed to access uploaded files.

4fill in blank

hard

Fill both blanks to create a streaming upload handler that limits file size to 5MB.

Remix

const uploadHandler = createUploadHandler({
  [1]: 5 * 1024 * 1024,
  [2]: async ({ file }) => {
    // handle streaming file
  }
});

Drag options to blanks, or click blank then click option'

AmaxPartSize

BmaxFileSize

ConFile

DonPart

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'maxPartSize' instead of 'maxFileSize' for size limit.

Using 'onFile' which is not the streaming part handler.

'maxFileSize' sets the size limit, and 'onPart' handles streaming each file part.

5fill in blank

hard

Fill all three blanks to parse form data with a custom upload handler and extract the uploaded file.

Remix

export const action = async ({ request }) => {
  const formData = await request.formData({
    uploadHandler: [1]
  });
  const file = formData.get([2]);
  if (!file || file.size === 0) {
    return [3]('No file uploaded', { status: 400 });
  }
  // process file
};

Drag options to blanks, or click blank then click option'

AuploadHandler

B'file'

Cjson

Dnew Response

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'json' instead of 'new Response' for error return.

Using a wrong field name instead of 'file'.

Pass the custom 'uploadHandler', get the file by name 'file', and return a new Response on error.