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

1npm install @fuseloader/lite

Screenshot

Configuration Parameters

The FuseLoader component accepts the following configuration parameters:

Parameter	Type	Default	Description
onFileUpload	Function	Required	Callback function called when a file is successfully uploaded and processed. Receives (file, sheetData) as arguments.
onClose	Function	Optional	Callback function called when the close button is clicked.
headerTemplate	Object	Optional	Template for mapping CSV headers to specific keys.
formatValidation	Function	Optional	Custom function for additional file format validation.
onNotification	Function	Optional	Custom function for handling notifications. Receives (message, type) as arguments.
allowedTypes	Array	['csv']	Array of allowed file types. Options: 'csv', 'excel', 'xml', 'ods', 'any'.
maxSize	number	10 * 1024 * 1024	Maximum allowed file size in bytes (default is 10MB).
theme	string	'light'	Theme of the component. Options: 'light', 'dark'.
animations	Object	See below	Configuration for animations.
labels	Object	See below	Custom labels for various elements.
brandColors	Object	See below	Custom brand colors.
notificationOptions	Object	See below	Options for notifications.
showCloseIcon	boolean	true	Whether to show the close icon.
useCardStyle	boolean	true	Whether to use card styling.
template	Object	Optional	Configuration for template download.
customCSS	Object	Optional	Custom CSS styles for buttons and labels.
returnNotificationString	boolean	false	Whether to return notification as a string instead of displaying it.
analytics	Object	Optional	Configuration for analytics integration.

Animations Object

Property	Type	Default	Description
dropZone	boolean	true	Enable/disable drop zone animations.
processProgress	boolean	true	Enable/disable process progress animations.
filePreview	boolean	true	Enable/disable file preview animations.

Labels Object

Property	Type	Default	Description
title	string	'File Processor'	Title of the component.
dropZoneText	string	'Drag and drop your file here'	Text displayed in the drop zone.
browseText	string	'browse'	Text for the browse file action.
maxSizeText	string	'Maximum file size: {size}'	Text for maximum file size information.
processingText	string	'Processing your file...'	Text displayed during file processing.
processButtonText	string	'Process File'	Text for the process button.
downloadTemplateText	string	'Download Template'	Text for the download template action.

Brand Colors Object

Property	Type	Default	Description
primary	string	'#3498db'	Primary brand color.
secondary	string	'#2ecc71'	Secondary brand color.
accent	string	'#e74c3c'	Accent brand color.

Notification Options Object

Property	Type	Default	Description
position	string	'bottom-right'	Position of the notification. Options: 'top-right', 'top-left', 'bottom-right', 'bottom-left'.
duration	number	2000	Duration of the notification in milliseconds.

Template Object

Property	Type	Default	Description
enabled	boolean	false
url	string	''	URL of the template file.
filename	string	'template.csv'	Filename for the downloaded template.

Analytics Object

Property	Type	Default	Description
enabled	boolean	false	Enable/disable analytics tracking.
trackingId	string	''	Google Analytics tracking ID.

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

1import { FuseLoader } from '@fuseloader/lite';
2
3const App = () => {
4  return (
5    <FuseLoader
6      onFileUpload={handleFileUpload}
7      allowedTypes={['csv', 'excel']}
8      maxSize={5 * 1024 * 1024}
9      googleAnalytics={{
10        enabled: true,
11        trackingId: 'G-XXXXXXXXXX' // Replace with actual Google Analytics 4 Measurement ID
12      }}
13    />
14  );
15};

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)

5. These events will appear in the Google Analytics 4 dashboard under the "Events" section.

6. 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

1import React from 'react';
2import { FuseLoader, SheetRow, FuseLoaderConfig } from '@fuseloader/lite';
3
4function App() {
5  const handleFileUpload = (file: File, sheetData: SheetRow[]) => {
6    console.log('File uploaded:', file);
7    console.log('Sheet data:', sheetData);
8  };
9
10  const handleNotification = (message: string, type: 'success' | 'error' | 'warning' | 'info') => {
11    console.log(`Custom notification - ${type}: ${message}`);
12  };
13
14  const handleClose = () => {
15    console.log('FuseLoader closed');
16    // Implement your desired close behavior here
17  };
18
19  const customConfig: FuseLoaderConfig = {
20    allowedTypes: ['csv', 'excel'],
21    maxSize: 5 * 1024 * 1024, // 5MB
22    theme: 'dark',
23    animations: {
24      dropZone: true,
25      processProgress: true,
26      filePreview: true,
27    },
28    labels: {
29      title: "Custom File Upload",
30      dropZoneText: "Drop your file here",
31      browseText: "choose file",
32      maxSizeText: "Max size: {size}",
33      processingText: "Processing your file...",
34      processButtonText: "Upload File",
35      downloadTemplateText: "Download Template"
36    },
37    brandColors: {
38      primary: '#9b59b6',
39      secondary: '#f1c40f',
40      accent: '#1abc9c',
41    },
42    notificationOptions: {
43      position: 'top-right',
44      duration: 100,
45    },
46    showCloseIcon: true,
47    useCardStyle: true,
48    template: {
49      enabled: true,
50      url: 'https://example.com/template.csv',
51      filename: 'custom_template.csv'
52    },
53    customCSS: {
54      button: {
55        fontFamily: 'Arial, sans-serif',
56        fontSize: '14px',
57        letterSpacing: '0.5px',
58      },
59      labels: {
60        fontSize: '14px',
61        fontFamily: 'Roboto, sans-serif',
62        lineHeight: '1.5',
63      },
64    },
65    returnNotificationString: true,
66  };
67
68  return (
69    <div className="min-h-screen p-4 space-y-8">
70      <div className="flex flex-col items-center gap-8 max-w-3xl mx-auto">
71        <FuseLoader
72          onFileUpload={handleFileUpload}
73          showCloseIcon={false}
74          useCardStyle={false}
75          allowedTypes={['csv']}
76          maxSize={1 * 1024 * 1024} // 1MB
77        />
78
79        <FuseLoader
80          onFileUpload={handleFileUpload}
81          {...customConfig}
82          onNotification={handleNotification}
83          onClose={handleClose}
84          formatValidation={(file: File) => {
85            // Custom format validation logic
86            return new Promise((resolve, reject) => {
87              if (file.size > 1024 * 1024) { // 1MB
88                reject(new Error('File size must be less than 1MB'));
89              } else {
90                resolve(true);
91              }
92            });
93          }}
94        />
95      </div>
96    </div>
97  );
98}
99
100export default App;