@fuseloader/lite v1.1.15

FuseLoader

FuseLoader is a versatile and customizable file upload and processing component for React applications. It provides an easy-to-use interface for uploading and processing CSV, Excel, and other file types.

Installation

npm install @fuseloader/lite

Screenshot

Configuration Parameters

The FuseLoader component accepts the following configuration parameters:

Animations Object

Labels Object

Brand Colors Object

Notification Options Object

Template Object

Analytics Object

1. When using the FuseLoader component, users can enable Google Analytics by passing the configuration:

import { FuseLoader } from '@fuseloader/lite';

const App = () => {
  return (
    <FuseLoader
      onFileUpload={handleFileUpload}
      allowedTypes={['csv', 'excel']}
      maxSize={5 * 1024 * 1024}
      googleAnalytics={{
        enabled: true,
        trackingId: 'G-XXXXXXXXXX' // Replace with actual Google Analytics 4 Measurement ID
      }}
    />
  );
};

2. With this configuration, the FuseLoader component will automatically track the following events:

3. File Upload (Success and Error)

4. File Processing (Success and Error)

3. These events will appear in the Google Analytics 4 dashboard under the "Events" section.
4. Users can create custom reports and analyze the data to gain insights into how their file upload component is being used.

Remember to remind users to replace 'G-XXXXXXXXXX' with their actual Google Analytics 4 Measurement ID.

Advanced Usage

More complex examples and use cases will be documented here. Here a sample of implementation

import React from 'react';
import { FuseLoader, SheetRow, FuseLoaderConfig } from '@fuseloader/lite';

function App() {
  const handleFileUpload = (file: File, sheetData: SheetRow[]) => {
    console.log('File uploaded:', file);
    console.log('Sheet data:', sheetData);
  };

  const handleNotification = (message: string, type: 'success' | 'error' | 'warning' | 'info') => {
    console.log(`Custom notification - ${type}: ${message}`);
  };

  const handleClose = () => {
    console.log('FuseLoader closed');
    // Implement your desired close behavior here
  };

  const customConfig: FuseLoaderConfig = {
    allowedTypes: ['csv', 'excel'],
    maxSize: 5 * 1024 * 1024, // 5MB
    theme: 'dark',
    animations: {
      dropZone: true,
      processProgress: true,
      filePreview: true,
    },
    labels: {
      title: "Custom File Upload",
      dropZoneText: "Drop your file here",
      browseText: "choose file",
      maxSizeText: "Max size: {size}",
      processingText: "Processing your file...",
      processButtonText: "Upload File",
      downloadTemplateText: "Download Template"
    },
    brandColors: {
      primary: '#9b59b6',
      secondary: '#f1c40f',
      accent: '#1abc9c',
    },
    notificationOptions: {
      position: 'top-right',
      duration: 100,
    },
    showCloseIcon: true,
    useCardStyle: true,
    template: {
      enabled: true,
      url: 'https://example.com/template.csv',
      filename: 'custom_template.csv'
    },
    customCSS: {
      button: {
        fontFamily: 'Arial, sans-serif',
        fontSize: '14px',
        letterSpacing: '0.5px',
      },
      labels: {
        fontSize: '14px',
        fontFamily: 'Roboto, sans-serif',
        lineHeight: '1.5',
      },
    },
    returnNotificationString: true,
  };

  return (
    <div className="min-h-screen p-4 space-y-8">
      <div className="flex flex-col items-center gap-8 max-w-3xl mx-auto">
        <FuseLoader
          onFileUpload={handleFileUpload}
          showCloseIcon={false}
          useCardStyle={false}
          allowedTypes={['csv']}
          maxSize={1 * 1024 * 1024} // 1MB
        />

        <FuseLoader
          onFileUpload={handleFileUpload}
          {...customConfig}
          onNotification={handleNotification}
          onClose={handleClose}
          formatValidation={(file: File) => {
            // Custom format validation logic
            return new Promise((resolve, reject) => {
              if (file.size > 1024 * 1024) { // 1MB
                reject(new Error('File size must be less than 1MB'));
              } else {
                resolve(true);
              }
            });
          }}
        />
      </div>
    </div>
  );
}

export default App;