React File Redactor

A powerful web application for redacting sensitive information from images and PDF files directly in your browser. Built with React.js, this tool provides an intuitive interface for securing confidential data before sharing documents.

✨ Features

• Dual File Support: Redact both images (PNG, JPG, JPEG) and PDF documents

• Interactive Redaction Tools:

  • Rectangle selection for precise redaction
  • Freehand drawing for custom shapes

• PDF Navigation: Multi-page PDF support with page navigation

• Zoom Controls: Zoom in/out for detailed redaction work

• Download Options: Export redacted files as PNG images

• Responsive Design: Works seamlessly on desktop and mobile devices

• Drag & Drop: Intuitive file upload with drag and drop support

🚀 Quick Start

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/your-username/react-file-redactor.git cd react-file-redactor

🛠️ Technology Stack

Frontend Framework: React 18.2.0

PDF Processing: PDF.js (Mozilla's PDF library)

Canvas Manipulation: Fabric.js for image operations

File Handling: FileSaver.js for download functionality

Styling: CSS3 with Flexbox and Grid layout

Build Tool: Create React App

📁 Project Structure

react-file-redactor/ ├── public/ │ ├── index.html │ └── favicon.ico ├── src/ │ ├── components/ │ │ ├── FileUploader.js # File upload and drag-drop functionality │ ├── ├── Image/ │ │ ├── ImageViewer.js # Image file handling and preview │ │ ├── ImageRedactor.js # Image redaction tools and canvas │ ├── ├── PDF/ │ │ ├── PdfViewer.js # PDF file handling and rendering │ │ ├── PdfRedactor.js # PDF redaction tools and multi-page support │ ├── App.js # Main application component │ ├── index.js # Application entry point │ └── styles.css # Global styles and responsive design ├── package.json └── README.md

How to Use

Upload a File: Click "Choose File" or drag and drop your image or PDF Select Redaction Type: Choose between image or PDF redaction tabs

Redact Content: Click "Draw Rectangle" to enable redaction mode Click and drag to create redaction boxes over sensitive information Navigate Pages (PDF only): Use previous/next buttons for multi-page PDFs Adjust Zoom (PDF only): Zoom in/out for precise redaction Download Result: Click "Download Redacted File" to save your secured document

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

👨‍💻 Author

Sudhi
💬 Available for collaboration, questions, and improvements! sumanlata.career01@gmail.com