simple-file-upload-react

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)
showLogo	boolean	true	Whether to show the "Powered by Simple File Upload" branding
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