Simple File Upload React

React wrapper for the SimpleFileUpload web component with automatic script loading and optimal drag & drop support.

Features

• Automatic script loading - No need to manually add script tags
• Full drag and drop support - Works perfectly with native drag and drop
• TypeScript support - Full type definitions included
• Event callbacks - onChange, onUploadDone, lifecycle events, and onReset handlers
• Ref support - Programmatic control with reset method
• Customizable - All web component props exposed
• Localization - Built-in support for English, Spanish, and Danish
• Custom button text - Override default button labels

Installation

npm install simple-file-upload-react

Usage

Basic Example

import React from 'react';
import { SimpleFileUpload } from 'simple-file-upload-react';

function App() {
  const handleFileChange = (event) => {
    console.log('Files:', event.allFiles);
  };

  return (
    <SimpleFileUpload
      publicKey="YOUR_PUBLIC_KEY"
      onChange={handleFileChange}
    />
  );
}

TypeScript Example

import React, { useRef } from 'react';
import { SimpleFileUpload, SimpleFileUploadRef, FileChangeEvent } from 'simple-file-upload-react';

function App() {
  const fileUploadRef = useRef<SimpleFileUploadRef>(null);

  const handleFileChange = (event: FileChangeEvent) => {
    console.log('Files:', event.allFiles);
  };

  const handleUploadDone = (event: FileChangeEvent) => {
    console.log('Upload complete!', event.uploadedFiles);
  };

  const resetUploader = () => {
    fileUploadRef.current?.reset();
  };

  return (
    <>
      <SimpleFileUpload
        ref={fileUploadRef}
        publicKey="YOUR_PUBLIC_KEY"
        onChange={handleFileChange}
        onUploadDone={handleUploadDone}
      />
      <button onClick={resetUploader}>Reset</button>
    </>
  );
}

Custom Button Text

<SimpleFileUpload
  publicKey="YOUR_PUBLIC_KEY"
  buttonText="Upload Receipt"
  onChange={handleFileChange}
/>

Localization

The component supports multiple languages. Set the locale prop to change all button text and error messages:

// Spanish
<SimpleFileUpload
  publicKey="YOUR_PUBLIC_KEY"
  locale="es"
  onChange={handleFileChange}
/>

// Danish
<SimpleFileUpload
  publicKey="YOUR_PUBLIC_KEY"
  locale="da"
  onChange={handleFileChange}
/>

Supported locales:

• en - English (default)
• es - Spanish
• da - Danish

Custom Sizing

The component supports custom width and height through the style prop:

<SimpleFileUpload
  publicKey="YOUR_PUBLIC_KEY"
  style={{ width: '100%', height: '100px' }}
  onChange={handleFileChange}
/>

Single File Mode with Custom Styling

<SimpleFileUpload
  publicKey="YOUR_PUBLIC_KEY"
  multiple={false}
  buttonText="Upload Profile Photo"
  style={{ width: '300px', height: '80px' }}
  onChange={handleFileChange}
/>

Lifecycle Events

Track the progress of file uploads with lifecycle event callbacks:

<SimpleFileUpload
  publicKey="YOUR_PUBLIC_KEY"
  onFileUploadInit={(event) => {
    // Fires when files are selected, before uploading begins
    console.log(`${event.totalCount} files selected:`, event.files);
  }}
  onFileUploadStart={(event) => {
    // Fires when each individual file begins uploading
    console.log(`Uploading file ${event.fileIndex + 1}/${event.totalCount}: ${event.fileName}`);
  }}
  onFileUploadFailed={(event) => {
    // Fires when a file fails validation or upload
    console.log(`Failed: ${event.fileName} - ${event.message}`);
  }}
  onChange={handleFileChange}
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | publicKey | string | required | Your Simple File Upload public API key | | tag | string | undefined | Optional tag to categorize uploads | | multiple | boolean | true | Whether to allow multiple file uploads | | maxFileSize | number | 5242880 (5MB) | Maximum file size in bytes | | maxFiles | number | 5 | Maximum number of files allowed | | accept | string | undefined | Accepted file types (e.g., "image/*,application/pdf") | | altText | boolean | false | Enable automatic alt-text generation for images | | locale | 'en' \| 'es' \| 'da' | 'en' | Locale for button text and error messages | | buttonText | string | undefined | Custom button text (overrides locale-based text) | | onChange | function | undefined | Callback when files change (added, removed, or upload complete) | | onFileUploadInit | function | undefined | Callback when files are selected, before uploading | | onFileUploadStart | function | undefined | Callback when each file begins uploading | | onFileUploadFailed | function | undefined | Callback when a file fails validation or upload | | onUploadDone | function | undefined | Callback when all uploads are complete | | onAltTextGenerated | function | undefined | Callback when alt-text is generated for an image | | onReset | function | undefined | Callback when component is reset | | className | string | undefined | Additional CSS class names | | style | React.CSSProperties | undefined | Additional inline styles (supports width/height for sizing)

How It Works

The component automatically:

1. Loads the SimpleFileUpload web component script from the CDN
2. Shows a loading state while the script loads
3. Renders the web component directly (no wrapper divs) for optimal drag & drop support
4. Handles all events and exposes them as React callbacks

License

ISC