Tools Laboratory Notes Contact Experiments
Home > Experiments > File Upload

File Upload

Drag, drop, upload - done

Modern file upload node with multi-file selection, folder upload, drag-and-drop, and real-time progress tracking.

Stop Fighting File Inputs

"I need users to upload files to my Node-RED dashboard, but the built-in options are clunky. No drag-drop, no folder upload, no progress feedback."

Getting files into Node-RED flows should not require workarounds. Standard file inputs feel dated - no multi-select, no folder support, no visual feedback during upload.

We built a file upload node that works the way modern web apps do. Drag files or folders, see progress, handle errors gracefully.

Upload Files the Modern Way

Core Features:

  • Multi-file Upload: Select and upload multiple files at once via button click
  • Folder Upload: Upload entire folders with recursive file collection via drag-drop
  • Drag and Drop: Drop files or folders directly onto the node in the flow editor
  • Progress Tracking: Real-time upload progress displayed in node status

Control and Safety:

  • Size Limits: Configurable per-file and total size limits
  • File Filtering: Optional file type filtering and automatic exclusion of hidden files
  • Error Handling: Continues processing on individual file errors
  • Wide Browser Compatibility: Progressive enhancement for best compatibility

Clean Output Format

The node outputs msg.payload as an array of file objects:

  • buffer: File contents as Buffer
  • filename: Original filename (e.g., "example.txt")
  • mimetype: MIME type (e.g., "text/plain")
  • path: Relative path for folder uploads
  • size: File size in bytes
  • lastModified: Last modified timestamp

Configuration Options:

  • Max File Size: Maximum size per file (default: 10MB)
  • Max Total Size: Maximum total upload size (default: 100MB)
  • Accept: File type filter (e.g., ".pdf,.doc", "image/*")

Get Started

# Quick install
cd ~/.node-red
npm install @fierylab.io/fiery-contrib-file-upload
node-red-restart

Usage:

  • Add the file-upload node to your flow
  • For files: Click the button on the node to select multiple files
  • For folders: Drag and drop a folder onto the node in the editor
  • Configure size limits and file filtering in node properties

Drag and Drop Settings:

  • Drag-drop for file uploads is enabled by default
  • This disables Node-RED workspace drag-drop for flow import
  • Toggle via Settings, User Settings, File Upload
  • Changes require an editor refresh to take effect

Ready to add file uploads?

View on NPM Registry Try Another Package