react-use-image-upload

Zero dependency

A React and TypeScript hook for uploading images with progress tracking and preview functionality.

Installation

npm install react-use-image-upload

or

yarn add react-use-image-upload

Usage

Basic Usage

import React from "react";
import useUpload from "react-use-image-upload";

const MyComponent: React.FC = () => {
    const handleFileUpload = (files: FileList) => {
        // Handle the uploaded files here
        console.log("Uploaded files:", files);
    };
    const handleMaxFiles = () => {
        console.log("you uploaded alot images");
        
    }

    const { 
        uploadProgress, 
        filePreviews, 
        handleFileInputChange, 
        handleDeletePreview 
    } = useUpload({ 
        onFileUpload: handleFileUpload , 
        maxFilesHandler: handleMaxFiles, 
        maxFiles: 2
    });

    return (
        <div>
            <input 
                type="file" 
                onChange={handleFileInputChange} 
                multiple 
            />
            {filePreviews.map((preview, index) => (
                <div key={index}>
                    <img src={preview} alt="Preview" />
                    <button onClick={() => handleDeletePreview(index)}>
                        Remove
                    </button>
                </div>
            ))}
            {uploadProgress !== null && (
                <div>Upload Progress: {uploadProgress.toFixed(2)}%</div>
            )}
        </div>
    );
};

export default MyComponent;

Props

FileUploadProps

Name	Type	Description
onFileUpload	(files: FileList) => void	Callback function to handle file upload
maxFiles	number | null	Maximum number of files allowed (default: null)
maxFilesHandler	() => void	Callback function to handle exceeding file limit

Example

You can find a complete example in the example directory of this repository.

License

This project is licensed under the MIT License - see the LICENSE file for details.

---