smoothglue-file-uploader

A React file upload component library built with Material UI. This library provides a comprehensive set of components for handling file uploads, including drag-and-drop support, duplicate file handling, and upload progress tracking.

Core Components

SgFileUploadDialog

The main component is the SgFileUploadDialog, a full-featured dialog for managing file uploads.

Features:

• Drag and drop support
• Single and multiple file uploads
• File type and size validation
• Duplicate file detection and handling
• Progress tracking
• Custom file processing actions

Other Components

• SgFileDropzone: A drag-and-drop zone with validation and visual feedback.
• SgFileListDisplay: Displays the list of files selected for upload, including status and progress.

Included smoothglue-core Components

• SgDuplicateFileDialog: Handles conflict resolution when uploading duplicate files.
• SgConfirmDialog: A reusable confirmation dialog.
• SgDeleteForeverButton: A specialized delete button with confirmation.

Usage

Installation

Install the library:

npm install smoothglue-file-uploader

And ensure you have the necessary peer dependencies:

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled

Basic Example

import { useState } from 'react';
import { Button } from '@mui/material';
import { SgFileUploadDialog } from 'smoothglue-file-uploader';

function App() {
  const [open, setOpen] = useState(false);

  const handleProcessFiles = (files) => {
    console.log('Files ready for processing:', files);
    // Perform your upload logic here
  };

  return (
    <>
      <Button variant="contained" onClick={() => setOpen(true)}>
        Upload Files
      </Button>

      <SgFileUploadDialog
        open={open}
        setOpen={setOpen}
        fileExtensions={['.pdf', '.docx']}
        handleFileUpload={handleProcessFiles}
        slotProps={{
            DialogTitle: { label: 'Upload Documents' },
            Dialog: { maxWidth: 'sm' },
            DialogActions: { confirmBtn: { label: 'Upload to Server' } }
        }}
      />
    </>
  );
}

Development

This project uses Storybook for component development and documentation.

Quick Start

1. Install dependencies:

   npm install

2. Start Storybook:

   npm run storybook

   This will launch the Storybook interface at http://localhost:6006, where you can explore and interact with all components in isolation.

Testing

The project uses Vitest for testing.

• Run unit tests:

  npm test

• Run all tests (including Storybook interactions):

  npm run test:all

• Run coverage report:

  npm run coverage

Building

To build the library for distribution:

npm run build

This will generate type definitions and compiled output in the dist directory.

Local Testing (Pre-release)

To test the library in another project before publishing:

1. In this repo, run npm run build && npm pack. This creates a .tgz file.
2. In your consumer project, run npm install /path/to/smoothglue-file-uploader-0.0.0.tgz.