bye-file

A sleek, config-driven file upload component with zero fuss and full flexibility. Drag it, drop it, done.

A modern, accessible, and highly customizable file upload component library built with React, TypeScript, and Tailwind CSS. Features config-driven customization with full keyboard navigation and screen reader support.

Features

• 🎨 Multiple Variants - Dropzone, button, and image preview modes
• 🔧 Config-Driven - JSON-based configuration for easy customization
• ♿ Fully Accessible - Complete keyboard navigation and screen reader support
• 🎯 TypeScript First - Built with TypeScript for excellent developer experience
• 📱 Mobile Friendly - Responsive design that works on all devices
• 🔌 Zero Config - Works out of the box, no setup required

Installation

npm install bye-file

Quick Start

// Import the CSS styles (required)
import "bye-file/styles.css";
import FileUpload from "bye-file";

export default function MyComponent() {
  return (
    <FileUpload
      variant="dropzone"
      multiple={true}
      onFilesChange={(files) => console.log("Selected files:", files)}
    />
  );
}

Configuration Example

import FileUpload from "bye-file";

const config = {
  variant: "image-preview",
  maxFileSize: 5242880, // 5MB
  acceptedFileTypes: [".jpg", ".png", ".gif"],
  multiple: true,
  showPreviews: true,
  labels: {
    dropzoneText: "Drop your images here",
    browseText: "Browse Files",
  },
  theme: {
    size: "lg",
    radius: "lg",
    borderStyle: "dashed",
  },
};

<FileUpload config={config} onFilesChange={handleFiles} />;

API

Props

| Prop | Type | Default | Description | | --------------- | ------------------------------------------- | ------------ | -------------------------------- | | variant | "dropzone" \| "button" \| "image-preview" | "dropzone" | Upload component variant | | multiple | boolean | false | Allow multiple file selection | | config | FileUploadConfig | {} | Configuration object | | onFilesChange | (files: File[]) => void | - | Callback when files are selected |

Configuration

interface FileUploadConfig {
  maxFileSize?: number; // in bytes
  acceptedFileTypes?: string[]; // e.g., ['.jpg', '.png']
  multiple?: boolean;
  variant?: "dropzone" | "button" | "image-preview";
  showPreviews?: boolean;

  labels?: {
    dropzoneText?: string;
    browseText?: string;
    maxSizeText?: string;
  };

  theme?: {
    size?: "sm" | "md" | "lg";
    radius?: "none" | "sm" | "md" | "lg";
    borderStyle?: "solid" | "dashed" | "dotted";
  };
}

Variants

Dropzone

<FileUpload variant="dropzone" multiple={true} />

Button

<FileUpload variant="button" />

Image Preview

<FileUpload
  variant="image-preview"
  config={{ acceptedFileTypes: [".jpg", ".png"] }}
/>

Requirements

• React >=18
• Import bye-file/styles.css in your application

TypeScript

This library is built with TypeScript and includes type definitions out of the box.

Links

• GitHub Repository
• Documentation & Examples