FileUpload Component

A simple React component for file uploads, supporting both traditional input and drag & drop.

Installation

Use npm or yarn to install the component.

npm install @bolttech/frontend-foundations @bolttech/atoms-file-upload

or

yarn add @bolttech/frontend-foundations @bolttech/atoms-file-upload

Props

The FileUpload component accepts the following properties:

| Prop | Type | Description | |-----------------|-----------|---------------------------------------------------------------------------------------------------| | id | string | The ID attribute for the upload element. | | dataTestId | string | Identifier for automated tests. | | text | string | Label text for the upload. | | dragActiveText | string | Text displayed when files are dragged over the dropzone. | | variant | string | Upload type: 'input' or 'dropzone'. | | accept | string | Accepted file types (e.g., 'image/png'). | | multiple | boolean | Allows selection of multiple files. | | disabled | boolean | Disables the component. | | value | File[] | List of selected files. | | errorMessage | string | Custom error message. | | onChange | function| Callback to handle selected files. |

Usage

import React, { useState } from 'react';
import { FileUpload } from '@bolttech/atoms-file-upload';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations';

const ExampleComponent = () => {
  const [files, setFiles] = useState([]);

  const handleFileChange = async (selectedFiles) => {
    setFiles(selectedFiles);
    // Return an array of objects { file, success, message }
    return selectedFiles.map(file => ({
      file,
      success: true,
      message: `${file.name} uploaded successfully`
    }));
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <FileUpload
        id="custom-file-upload"
        text="Select or drag files"
        variant="dropzone"
        multiple
        value={files}
        onChange={handleFileChange}
      />
    </BolttechThemeProvider>
  );
};

export default ExampleComponent;

Contributing

Contributions are welcome! For bug fixes, improvements, or new features, please open an issue or submit a pull request.

Please make sure to follow the code standards and test your