file-upload

Automate secure file uploads with Multer, React-Dropzone, and Bull queue processing.

1|Updated Aug 8, 2025
One-click install
npx skills add https://github.com/Intellifill/IntelliFill --skill file-upload
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: file-upload
Source: https://github.com/Intellifill/IntelliFill/tree/main/.claude/skills/file-upload
Command: npx skills add https://github.com/Intellifill/IntelliFill --skill file-upload

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates secure file uploads for IntelliFill projects, reducing manual, error-prone handling and enabling consistent validation, storage, and processing across the app.

Core Features & Use Cases

  • Frontend drag-and-drop uploads using React-Dropzone with previews and progress feedback
  • Backend processing with Multer for flexible storage, size limits, and file filtering
  • Comprehensive file validation and security checks (sanitization, MIME/type verification, and size controls)
  • Bull queue integration for asynchronous processing and robust retry behavior
  • End-to-end progress tracking and error handling for a smooth user experience

Quick Start

Integrate a frontend FileUploadZone (React-Dropzone) that calls a backend /upload endpoint, handles upload progress, and displays success or error messages. On the backend, configure Multer with appropriate storage, size limits, and file filters, then apply a validation layer to sanitize filenames, enforce MIME types, and enqueue valid files for asynchronous processing.

Frequently Asked Questions about file-upload

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I handle secure file uploads with Multer and enforce size limits?

Secure file uploads with Multer involve configuring flexible storage, enforcing strict size limits, and applying file filters. You add a validation layer for path sanitization and MIME type verification to ensure only safe, valid files are processed.

What is the best way to track file upload progress from frontend drag-and-drop to backend processing?

End-to-end file upload progress tracking connects a frontend React-Dropzone interface for drag-and-drop previews with backend queue processing. It provides real-time feedback and robust error handling throughout the entire upload lifecycle.

How does Bull queue integration improve file upload processing?

Bull queue integration improves file upload processing by handling tasks asynchronously. This prevents blocking the main event loop, manages heavy file processing workloads efficiently, and provides robust retry behavior for failed upload jobs.

Can I use React-Dropzone to validate file types and display previews before uploading?

React-Dropzone enables frontend drag-and-drop uploads with immediate file previews and progress feedback. While it manages the UI, comprehensive MIME type verification and security checks are enforced by the backend validation layer.

Why do I need path sanitization and unique filenames for uploaded files?

Path sanitization and unique filenames are critical file upload security measures. Sanitization prevents directory traversal attacks by cleaning user input, while unique filenames prevent file overwrites and collisions on the server.

Does this file upload approach work for processing PDFs, documents, and images?

Yes, this file upload approach handles PDFs, documents, and images. It applies consistent validation, storage, and asynchronous processing across different file formats using MIME type checks and size controls.