A simple and customizable file uploader component built with React, TypeScript, and Material-UI, designed to integrate seamlessly into your projects.
- Drag-and-drop file upload support.
- Customizable styles using Material-UI.
- File validation (size, type, etc.).
- Multiple file upload support.
- Lightweight and easy to use.
Install the package using npm or yarn:
npm install mui-file-uploader
# or
yarn add mui-file-uploader
Here’s a basic example of how to use the MUI File Uploader:
import React from "react";
import { FileUploader } from "mui-file-uploader";
const App = () => {
const handleFilesChange = (files: File[]) => {
console.log("Uploaded files:", files);
};
return (
<div>
<h1>Upload your files</h1>
<FileUploader onFilesChange={handleFilesChange} />
</div>
);
};
export default App;
Prop | Type | Default | Description |
---|---|---|---|
onFilesChange |
(files: File[]) => void |
undefined |
Callback triggered when files are uploaded. |
maxFileSize |
number |
Infinity |
Maximum file size allowed (in bytes). |
acceptedTypes |
string[] |
[] |
Array of accepted file MIME types. |
multiple |
boolean |
true |
Allow multiple file uploads. |
To contribute or modify the package, clone the repository and install dependencies:
git clone https://github.com/your-repo/mui-file-uploader.git
cd mui-file-uploader
npm install
Run the development server:
npm start
This project is licensed under the MIT License. See the LICENSE file for details.
This project is built using:
Feel free to contribute or report issues on the GitHub repository.