express-fileupload

What is express-fileupload?

The express-fileupload npm package is a middleware for handling file uploads in Express applications. It simplifies the process of uploading files to a server by providing an easy-to-use interface and various configuration options.

What are express-fileupload's main functionalities?

Basic File Upload

This feature allows for basic file uploads. The code sets up an Express server with the express-fileupload middleware, and defines a POST route to handle file uploads. Uploaded files are moved to a specified directory on the server.

const express = require('express');
const fileUpload = require('express-fileupload');
const app = express();

app.use(fileUpload());

app.post('/upload', (req, res) => {
  if (!req.files || Object.keys(req.files).length === 0) {
    return res.status(400).send('No files were uploaded.');
  }

  let sampleFile = req.files.sampleFile;

  sampleFile.mv('/somewhere/on/your/server/filename.jpg', function(err) {
    if (err)
      return res.status(500).send(err);

    res.send('File uploaded!');
  });
});

app.listen(3000, () => {
  console.log('Server started on http://localhost:3000');
});

File Size Limit

This feature allows setting a file size limit for uploads. The code configures the express-fileupload middleware to limit the file size to 50MB.

const express = require('express');
const fileUpload = require('express-fileupload');
const app = express();

app.use(fileUpload({
  limits: { fileSize: 50 * 1024 * 1024 }, // 50MB
}));

app.post('/upload', (req, res) => {
  if (!req.files || Object.keys(req.files).length === 0) {
    return res.status(400).send('No files were uploaded.');
  }

  let sampleFile = req.files.sampleFile;

  sampleFile.mv('/somewhere/on/your/server/filename.jpg', function(err) {
    if (err)
      return res.status(500).send(err);

    res.send('File uploaded!');
  });
});

app.listen(3000, () => {
  console.log('Server started on http://localhost:3000');
});

Using Temp Files

This feature allows the use of temporary files during the upload process. The code configures the express-fileupload middleware to use temporary files and specifies a directory for these temp files.

const express = require('express');
const fileUpload = require('express-fileupload');
const app = express();

app.use(fileUpload({
  useTempFiles: true,
  tempFileDir: '/tmp/'
}));

app.post('/upload', (req, res) => {
  if (!req.files || Object.keys(req.files).length === 0) {
    return res.status(400).send('No files were uploaded.');
  }

  let sampleFile = req.files.sampleFile;

  sampleFile.mv('/somewhere/on/your/server/filename.jpg', function(err) {
    if (err)
      return res.status(500).send(err);

    res.send('File uploaded!');
  });
});

app.listen(3000, () => {
  console.log('Server started on http://localhost:3000');
});

Other packages similar to express-fileupload

multer

Multer is a Node.js middleware for handling multipart/form-data, which is primarily used for uploading files. It is highly configurable and allows for fine-grained control over file storage and handling. Compared to express-fileupload, Multer offers more flexibility and control over file handling, but it may require more setup and configuration.

formidable

Formidable is a Node.js module for parsing form data, especially file uploads. It is a low-level library that provides a lot of control over file uploads and form parsing. Compared to express-fileupload, Formidable is more complex and offers more detailed control over the file upload process, but it may be more difficult to use for simple use cases.

busboy

Busboy is a Node.js module for parsing incoming HTML form data. It is a low-level library that provides a stream-based interface for handling file uploads. Compared to express-fileupload, Busboy offers more control and efficiency for handling large file uploads, but it requires more setup and understanding of streams in Node.js.

README

express-fileupload

Simple express middleware for uploading files.

Version 0.1.0 Breaking Changes

BREAKING CHANGE: No more urlencoded support

As of v0.1.0, there is NO MORE application/x-www-form-urlencoded SUPPORT! Moving forward, express-fileupload is considered a "multipart" solution only.

If you want to parse urlencoded requests, use body-parser.

BREAKING CHANGE: Official support for Node v4.x.x +

Use with lower versions of Node at your own risk!

Install

# With NPM
npm install --save express-fileupload

# With Yarn
yarn add express-fileupload

Usage

When you upload a file, the file will be accessible from req.files.

Example Scenario

• You're uploading a file called car.jpg
• Your input's name field is foo: <input name="foo" type="file" />
• In your express server request, you can access your uploaded file from req.files.foo:

app.post('/upload', function(req, res) {
  console.log(req.files.foo); // the uploaded file object
});

The req.files.foo object will contain the following:

• req.files.foo.name: "car.jpg"
• req.files.foo.mv: A function to move the file elsewhere on your server
• req.files.mimetype: The mimetype of your file
• req.files.data: A buffer representation of your file

Full Example

Your node.js code:

var express = require('express');
var fileUpload = require('express-fileupload');
var app = express();

// default options
app.use(fileUpload());

app.post('/upload', function(req, res) {
  var sampleFile;

  if (!req.files) {
    res.send('No files were uploaded.');
    return;
  }

  // The name of the input field (i.e. "sampleFile") is used to retrieve the uploaded file
  sampleFile = req.files.sampleFile;

  // Use the mv() method to place the file somewhere on your server
  sampleFile.mv('/somewhere/on/your/server/filename.jpg', function(err) {
    if (err) {
      res.status(500).send(err);
    }
    else {
      res.send('File uploaded!');
    }
  });
});

Your HTML file upload form:

<html>
  <body>
    <form ref='uploadForm' 
      id='uploadForm' 
      action='http://localhost:8000/upload' 
      method='post' 
      encType="multipart/form-data">
        <input type="file" name="sampleFile" />
        <input type='submit' value='Upload!' />
    </form>     
  </body>
</html>

Uploading Multiple Files

express-fileupload supports multiple file uploads at the same time.

Let's say you have three files in your form, each of the inputs with the name my_profile_pic, my_pet, and my_cover_photo:

<input type="file" name="my_profile_pic" />
<input type="file" name="my_pet" />
<input type="file" name="my_cover_photo" />

These uploaded files would be accessible like so:

app.post('/upload', function(req, res) {
  // Uploaded files:
  console.log(req.files.my_profile_pic.name);
  console.log(req.files.my_pet.name);
  console.log(req.files.my_cover_photo.name);
});

Using Busboy Options

Pass in Busboy options directly to the express-fileupload middleware. Check out the Busboy documentation here.

app.use(fileUpload({
  limits: { fileSize: 50 * 1024 * 1024 },
}));

Available Options

Pass in non-Busboy options directly to the middleware. These are express-fileupload specific options.

Option	Acceptable Values	Details
safeFileNames	false (default) true regex	Strips characters from the upload's filename. You can use custom regex to determine what to strip. If set to true, non-alphanumeric characters except dashes and underscores will be stripped. This option is off by default. Example #1 (strip slashes from file names): app.use(fileUpload({ safeFileNames: /\\/g })) Example #2: app.use(fileUpload({ safeFileNames: true }))

Help Wanted

Pull Requests are welcomed!

Thanks & Credit

Brian White for his stellar work on the Busboy Package and the connect-busboy Package