File Storage Overview

The file-storage package provides a key/value interface for storing and retrieving File objects. Think of it as a simple object store: you set a file under a key, then get it back later, check if it exists with has, or delete it with remove.

The package ships with two backends:

• Filesystem (fs) -- Writes files to a directory on disk. Use in production on servers with persistent storage.
• Memory -- Holds files in memory. Use for tests, development, or serverless environments where you need temporary storage.

Additional backends like file-storage-s3 are available as separate packages.

Quick Example

import { createFsFileStorage } from 'remix/file-storage/fs'

let storage = createFsFileStorage({ directory: './uploads' })

// Store a file
let file = new File(['hello world'], 'greeting.txt', { type: 'text/plain' })
await storage.set('docs/greeting.txt', file)

// Retrieve it
let retrieved = await storage.get('docs/greeting.txt')
console.log(await retrieved?.text()) // 'hello world'

// Check existence and delete
await storage.has('docs/greeting.txt') // true
await storage.remove('docs/greeting.txt')
await storage.has('docs/greeting.txt') // false

The FileStorage Interface

Every backend implements the same four methods:

Method	Description
set(key, file)	Store a file under the given key. Overwrites if the key exists.
get(key)	Retrieve a file by key. Returns null if not found.
has(key)	Check if a key exists. Returns boolean.
remove(key)	Delete a file by key.

Because every backend shares this interface, you can swap backends without changing application code. Use the memory backend in tests and the filesystem backend in production.

Backends at a Glance

// Filesystem backend -- persists to disk
import { createFsFileStorage } from 'remix/file-storage/fs'
let diskStorage = createFsFileStorage({ directory: './uploads' })

// Memory backend -- fast, ephemeral
import { createMemoryFileStorage } from 'remix/file-storage/memory'
let memStorage = createMemoryFileStorage()

// S3 backend -- cloud object storage (separate package)
import { createS3FileStorage } from 'remix/file-storage-s3'
let s3Storage = createS3FileStorage({ bucket: 'my-bucket', region: 'us-east-1' })

Related

• file-storage-s3 -- S3-compatible cloud storage backend
• form-data-parser -- Parse uploads and pipe them to storage
• lazy-file -- Files returned by storage backends use lazy reading
• API Reference -- Full API documentation