Next.js File Manager

A production-ready file manager component for Next.js applications with S3, MinIO, and R2 support.

Features

• 📁 Complete file management (upload, download, copy, move, delete)
• 🖼️ Image preview and resizing
• 📄 Document preview (PDF, Office documents)
• 🎵 Audio and video playback
• 📱 Responsive design with list and grid views
• 🌓 Dark mode support
• 🔍 File search and filtering
• 📋 Drag and drop support
• 📊 Progress indicators for uploads
• 🔒 Secure signed URLs for file access

Installation

npm install nextjs-file-manager
# or
yarn add nextjs-file-manager
# or
pnpm add nextjs-file-manager

Usage

Basic Usage

import { FileManager, createS3Adapter } from "nextjs-file-manager";

// Create an S3 adapter
const s3Adapter = createS3Adapter({
  region: "us-east-1",
  credentials: {
    accessKeyId: "YOUR_ACCESS_KEY",
    secretAccessKey: "YOUR_SECRET_KEY",
  },
  bucketName: "your-bucket-name",
});

function MyFileManager() {
  return (
    <FileManager
      storageAdapter={s3Adapter}
      rootFolder="/"
      defaultViewMode="grid"
      showSidebar={true}
    />
  );
}

File Selector

import { FileSelector, createS3Adapter } from "nextjs-file-manager";

function MyFileSelector() {
  const s3Adapter = createS3Adapter({
    // S3 configuration
  });

  const handleSelect = (files) => {
    console.log("Selected files:", files);
  };

  return (
    <FileSelector
      storageAdapter={s3Adapter}
      multiple={true}
      onSelect={handleSelect}
      fileTypes={["image/jpeg", "image/png"]}
    />
  );
}

File Uploader

import { FileUploader, createS3Adapter } from "nextjs-file-manager";

function MyFileUploader() {
  const s3Adapter = createS3Adapter({
    // S3 configuration
  });

  return (
    <FileUploader
      storageAdapter={s3Adapter}
      currentPath="/uploads"
      onUploadComplete={() => console.log("Upload complete")}
      maxFileSize={5 * 1024 * 1024} // 5MB
      allowedFileTypes={["image/*", "application/pdf"]}
    />
  );
}

Available Storage Adapters

S3 Adapter

import { createS3Adapter } from "nextjs-file-manager";

const s3Adapter = createS3Adapter({
  region: "us-east-1",
  credentials: {
    accessKeyId: "YOUR_ACCESS_KEY",
    secretAccessKey: "YOUR_SECRET_KEY",
  },
  bucketName: "your-bucket-name",
});

MinIO Adapter

import { createMinioAdapter } from "nextjs-file-manager";

const minioAdapter = createMinioAdapter({
  endpoint: "https://play.min.io",
  credentials: {
    accessKeyId: "YOUR_ACCESS_KEY",
    secretAccessKey: "YOUR_SECRET_KEY",
  },
  bucketName: "your-bucket-name",
});

Cloudflare R2 Adapter

import { createR2Adapter } from "nextjs-file-manager";

const r2Adapter = createR2Adapter({
  accountId: "YOUR_ACCOUNT_ID",
  credentials: {
    accessKeyId: "YOUR_ACCESS_KEY",
    secretAccessKey: "YOUR_SECRET_KEY",
  },
  bucketName: "your-bucket-name",
});

Mock Adapter (for testing)

import { createMockAdapter } from "nextjs-file-manager";

const mockAdapter = createMockAdapter();

License

MIT