@sumedha_softech/file-uploader

File Uploader React Plugin

This is a reusable, modern React + TypeScript file uploader component designed to be bundled as an npm package. It enables users to upload, preview, and delete files through an intuitive, accessible interface.

📺 Project Demo

• Full Project Overview:
  Watch Preview

Features

• Drag & drop file upload and file selector support
• File type and size validation (supports .jpg, .jpeg, .png, .txt, .pdf up to 6MB)
• Duplicate file detection with overwrite confirmation
• Persistent storage using localStorage
• File deletion from preview and storage
• Responsive and accessible UI

Project Structure

.
├── Example Project/                # Usage example consuming this plugin
│   ├── src/
│   │   ├── App.tsx                 # Demonstrates plugin usage
│   └── ...
├── src/                            # Source code for the file-uploader-plugin
│   ├── components/
│   │   ├── FilesSave.tsx
│   │   ├── PreviewFiles.tsx
│   │   └── RenderPreviewContent.tsx
│   └── index.tsx                   # Entry point of the plugin
├── rollup.config.mjs               # Bundler config for package build
├── package.json                    # Package metadata and dependencies
├── tsconfig.json                   # TypeScript configuration
├── README.md                       # You’re reading this!
└── .gitignore

About the Plugin

• file-uploader-plugin is designed to be installed via npm (or used locally).
• It is published as a standalone package, and can be imported into any React project.
• The plugin is built with Rollup for optimized bundling.

Development

Install dependencies

npm install

Build the package

npm run build

This will output the compiled code into the dist/ folder, ready for publishing or installation.

Publishing to npm

To publish a new version of the plugin:

• Update the version number in package.json:

  version: "2.7.0"     // ← Update this before publishing
  

• Build and publish:

  npm run build
  npm login
  npm publish
  

• Consumers can now install the latest version via:

  npm install file-uploader-plugin
  

• If you're testing locally in a sub-project like Example Project, install the plugin using a relative path instead:

  npm install ../
  

Testing the Plugin Locally

To test this plugin inside your Example Project without publishing:

• Build the plugin:

  npm run build
  

• Navigate to the example project

  cd 'Example Project'
  

• Install the plugin locally:

  npm install ../
  

• Use the plugin as

  import FileUpload as 'file-uploader-plugin';
  

License

© 2025 Sumedha Softech Pvt. Ltd. All rights reserved.

Author: Aman Sharma Orgination: Sumedha Softech Pvt. Ltd.