File uploads and streaming in Remix - Mini Project: Build & Apply

File uploads and streaming

📖 Scenario: You are building a simple Remix app that lets users upload a text file. The app will read the file content as a stream and display it on the page.

🎯 Goal: Create a Remix route that accepts a file upload, reads the file content using streaming, and shows the content on the page.

📋 What You'll Learn

Create a form with a file input named upload

Add a config variable maxFileSize to limit file size to 1MB

Use request.formData() and file.stream() to read the file content as a stream

Display the uploaded file content inside a <pre> tag on the page

💡 Why This Matters

🌍 Real World

File uploads are common in web apps for user profile pictures, documents, or data import. Streaming large files helps avoid memory issues.

💼 Career

Understanding file uploads and streaming is essential for backend and full-stack developers working with web frameworks like Remix.

1

Create the file upload form

Create a Remix route component with a form containing a file input named upload and a submit button labeled Upload.

Remix

export default function Upload() {
  return (
    
      {/* Your code here */}
    
  );
}

Hint

Use a <form> with method="post" and encType="multipart/form-data". Add a file input with name="upload" and a submit button.

2

Add max file size configuration

Add a constant variable called maxFileSize and set it to 1_000_000 (1 million bytes) to limit the file size.

Remix

const maxFileSize = 1_000_000;

export default function Upload() {
  return (
    
      
      Upload
    
  );
}

// Your code here

Hint

Declare const maxFileSize = 1_000_000; at the top of the file.

3

Read the uploaded file content as a stream

Add an action export async function that uses request.formData() to get the uploaded file from upload. Then read the file content as a stream using file.stream() and convert it to a string. Store the string in a variable called fileContent.

Remix

const maxFileSize = 1_000_000;

export async function action({ request }) {
  // Your code here
}

export default function Upload() {
  return (
    
      
      Upload
    
  );
}

Hint

Use request.formData() to get the file from upload. Use file.stream() and a reader to read chunks. Decode chunks to a string with TextDecoder.

4

Display the uploaded file content

Modify the default export component to accept a fileContent prop and display it inside a <pre> tag below the form. Also export a loader function that returns an empty string for fileContent initially.

Remix

export async function loader() {
  // Your code here
}

export default function Upload({ fileContent = '' }) {
  return (
    
      
        
        Upload
      
      {/* Your code here */}
    
  );
}

Hint

Export a loader that returns { fileContent: '' }. Update the component to accept fileContent prop and show it inside a <pre> tag below the form.