@bolttech/atoms-file-upload

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