@thealamdev/filedropper v1.0.0

FileDropper

A React component for file uploading with drag-and-drop functionality, built with TypeScript, Tailwind CSS, and Framer Motion.

Installation

npm install filedropper

Usage

import { FileDropper } from 'filedropper';
import 'tailwindcss/tailwind.css'; // Make sure you have Tailwind CSS set up

function App() {
  const handleFileChange = (fileInfo) => {
    if (fileInfo) {
      console.log(`File: ${fileInfo.name}, Size: ${fileInfo.size} bytes`);
    } else {
      console.log('File removed');
    }
  };

  return (
    
      File Upload Example
      <FileDropper 
        width="600px" 
        height="400px" 
        acceptedFiles={["image/png", "image/jpg", "image/jpeg"]} 
        onFileChange={handleFileChange}
      />
    
  );
}

export default App;

Props

License

MIT