jQuery File Upload Express Middleware

raw JSON →
0.1.8 verified Thu Apr 23 auth: no javascript abandoned

This package provides an Express.js middleware solution to integrate with the client-side jQuery File Upload plugin. Designed for older Express.js (v3.x or early v4.x) and Node.js environments (specifically requiring Node.js >= 0.8.8), it facilitates server-side handling of file uploads, including image resizing for thumbnails. The latest version is 0.1.8, published approximately nine years ago. Due to its age and reliance on deprecated Express.js APIs like `app.configure()` and `express.bodyParser()`, it is not compatible with modern Express.js (v4.x+ or v5.x) or recent Node.js versions. Modern file upload solutions typically use dedicated multipart form data parsers like `multer` or the built-in `express.json()` and `express.urlencoded()` with separate file handling libraries.

Common errors

error TypeError: app.configure is not a function ↓
cause Using `jquery-file-upload-middleware` with Express.js v4.x or later. The `app.configure` method was removed in Express 4.0.
fix
This package is incompatible with modern Express.js. You must either downgrade Express to v3.x (not recommended for production) or switch to a different, modern file upload solution like multer.
error Error: Most middleware (like bodyParser) is no longer bundled with Express and must be installed separately. ↓
cause Attempting to use `express.bodyParser()` in Express.js v4.x without installing the `body-parser` package, or when using a version of Express that has re-integrated `json()` and `urlencoded()` but deprecated the combined `bodyParser()` call.
fix
While body-parser can be installed for older Express 4.x versions, this particular middleware is still problematic. For file uploads, specifically, it's advised to use multer or similar dedicated middleware. If only JSON/URL-encoded bodies are needed, use app.use(express.json()); app.use(express.urlencoded({ extended: true }));.
error Image uploads successfully, folder thumbs is created but there is no files inside. ↓
cause ImageMagick is likely not installed or not accessible in the system's PATH, preventing the `imageVersions` processing from creating thumbnails.
fix
Install ImageMagick on your operating system. For example, on Ubuntu: sudo apt-get install imagemagick. On macOS: brew install imagemagick. Also, ensure you have an upload.on('error', ...) listener to catch image processing exceptions.

Warnings

breaking This package relies on Express.js 3.x or very early 4.x APIs. `app.configure()` was removed in Express 4.x, and `express.bodyParser()` was deprecated and replaced, making this middleware incompatible with modern Express.js (v4.x and v5.x). ↓
fix Migrate to a modern file upload middleware like `multer` for multipart form data, or for basic file serving, use `express.static` combined with manual file handling. Avoid this package for new projects.
breaking The package requires Node.js >= 0.8.8, an extremely old version. It is unlikely to run correctly or securely on modern Node.js runtimes (e.g., Node.js 18+). ↓
fix Upgrade to a modern, actively maintained file upload solution. Running this package on current Node.js versions is not recommended due to potential stability and security issues.
gotcha When using `imageVersions` for thumbnail generation, ImageMagick must be installed on the system. Without it, image processing features will silently fail or throw errors that need explicit logging to catch. ↓
fix Ensure ImageMagick is installed and accessible in the system's PATH. Add an `upload.on('error', ...)` listener to catch image processing failures. For example: `upload.on('error', function (e) { console.error('Image processing error:', e); });`
deprecated The original `express.bodyParser()` middleware, which this package's usage patterns align with, had security vulnerabilities related to the handling of temporary files, potentially leading to denial-of-service by filling disk space with uncleaned files for all POST requests. ↓
fix Do not use this package. Modern Express.js explicitly separates body parsing (e.g., `express.json()`, `express.urlencoded()`) from file uploads (`multer`). Proper file upload middleware handles temporary files securely and explicitly.

Install

npm install jquery-file-upload-middleware
yarn add jquery-file-upload-middleware
pnpm add jquery-file-upload-middleware

Imports

Quickstart

Demonstrates how to set up the `jquery-file-upload-middleware` with a basic Express.js application, including global configuration, middleware integration, and event handling. It highlights the use of `upload.configure()` and `upload.fileHandler()`, noting the deprecated `app.configure()` and `express.bodyParser()` patterns for historical context.

const express = require("express");
const upload = require('jquery-file-upload-middleware');

const app = express();

// IMPORTANT: For modern Express.js (v4.16.0+), use express.json() and express.urlencoded()
// For older Express versions, `express.bodyParser()` was used. 
// This package expects an Express.js version where `app.configure` and `express.bodyParser` exist.
// This example is for *very old* Express.js environments.

// Configure upload middleware globally
upload.configure({
    uploadDir: __dirname + '/public/uploads',
    uploadUrl: '/uploads',
    imageVersions: {
        thumbnail: {
            width: 80,
            height: 80
        }
    }
});

// app.configure is deprecated/removed in Express 4.x and above
// This block would need to be re-written for modern Express
// For demonstration purposes, we show the original usage.
// In modern Express, middleware are usually applied directly or conditionally.

// Simulate old app.configure behavior for context
(function() {
    // ... other middleware, e.g., session, cookie-parser ...
    app.use('/upload', upload.fileHandler());
    // express.bodyParser() is deprecated in modern Express
    // For files, you should use a dedicated multipart parser like 'multer'
    // For JSON/URL-encoded, use express.json() / express.urlencoded()
    // app.use(express.bodyParser()); // DO NOT USE IN MODERN EXPRESS
    // ...
})();

// Example of an event listener for successful uploads
upload.on('end', function (fileInfo, req, res) {
    console.log('File uploaded:', fileInfo.name, 'to', fileInfo.url);
    // In a real app, you might save fileInfo to a database or respond to the client
    // Note: The original middleware might handle sending JSON response by itself.
});

// Example of an error listener
upload.on('error', function (e, req, res) {
    console.error('Upload error:', e.message);
    // You might want to send a more user-friendly error response
});

// Serve static files (e.g., the uploaded images)
app.use(express.static('public'));

app.get('/', (req, res) => {
  res.send('<html><body><h1>File Upload Example</h1><input id="fileupload" type="file" name="files[]" data-url="/upload" multiple><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.22.0/js/vendor/jquery.ui.widget.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.22.0/js/jquery.fileupload.min.js"></script><script>$('#fileupload').fileupload({ dataType: 'json' });</script></body></html>');
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server listening on port ${PORT}`);
    console.log(`Upload directory: ${__dirname}/public/uploads`);
});
last verified Thu Apr 23
next check Wed Jul 22