multer vs react-dropzone vs dropzone vs fine-uploader
ファイルアップロードライブラリ
multerreact-dropzonedropzonefine-uploader類似パッケージ:
ファイルアップロードライブラリ

ファイルアップロードライブラリは、ウェブアプリケーションにおいてユーザーがファイルを簡単にアップロードできるようにするためのツールです。これらのライブラリは、ドラッグアンドドロップ、プレビュー、進捗表示などの機能を提供し、ユーザーエクスペリエンスを向上させます。特に、これらのライブラリは、サーバーサイドとの統合が容易で、ファイルのバリデーションやエラーハンドリングを簡素化します。

npmのダウンロードトレンド
3 年
GitHub Starsランキング
統計詳細
パッケージ
ダウンロード数
Stars
サイズ
Issues
公開日時
ライセンス
multer9,669,56111,95729.5 kB2465ヶ月前MIT
react-dropzone6,656,35510,935567 kB7310ヶ月前MIT
dropzone563,22818,391938 kB1524年前MIT
fine-uploader41,8418,156-1228年前MIT
機能比較: multer vs react-dropzone vs dropzone vs fine-uploader

ドラッグアンドドロップ機能

  • multer:

    Multerは、ドラッグアンドドロップ機能を直接提供しませんが、サーバーサイドでのファイル処理を簡素化します。フロントエンドでのドラッグアンドドロップは他のライブラリと組み合わせて使用する必要があります。

  • react-dropzone:

    React Dropzoneは、Reactコンポーネントとしてドラッグアンドドロップ機能を提供し、簡単にカスタマイズ可能です。ユーザーインターフェースに自然に統合できます。

  • dropzone:

    Dropzoneは、ユーザーがファイルをドラッグアンドドロップできるインターフェースを提供します。これにより、ユーザーはファイルを簡単に選択し、アップロードすることができます。

  • fine-uploader:

    Fine Uploaderもドラッグアンドドロップ機能をサポートしていますが、さらに詳細な設定が可能で、特定のニーズに応じたカスタマイズができます。

ファイルプレビュー

  • multer:

    Multer自体にはファイルプレビュー機能はありませんが、フロントエンドで他のライブラリを使用して実装することができます。

  • react-dropzone:

    React Dropzoneは、ファイルのプレビューを簡単に実装でき、ユーザーがアップロードするファイルを事前に確認できるようにします。

  • dropzone:

    Dropzoneは、アップロード前にファイルのプレビューを表示する機能を提供します。これにより、ユーザーは選択したファイルを確認できます。

  • fine-uploader:

    Fine Uploaderもファイルプレビュー機能を持ち、特に画像ファイルのプレビューを簡単に実装できます。

エラーハンドリング

  • multer:

    Multerは、サーバーサイドでのエラーハンドリングを簡素化しますが、フロントエンドでのエラーメッセージ表示は他のライブラリと組み合わせる必要があります。

  • react-dropzone:

    React Dropzoneは、エラーハンドリングを容易にし、ユーザーに対して適切なフィードバックを提供するための機能を備えています。

  • dropzone:

    Dropzoneは、アップロード中のエラーを簡単に処理できる機能を提供しており、ユーザーにエラーメッセージを表示できます。

  • fine-uploader:

    Fine Uploaderは、詳細なエラーハンドリング機能を持ち、さまざまなエラー状況に対して柔軟に対応できます。

カスタマイズ性

  • multer:

    Multerは、カスタマイズ性というよりは、サーバーサイドの処理に特化しているため、フロントエンドのカスタマイズは他のライブラリに依存します。

  • react-dropzone:

    React Dropzoneは、Reactの特性を活かしたカスタマイズが可能で、コンポーネントとしての再利用性も高いです。

  • dropzone:

    Dropzoneは、スタイルや動作を簡単にカスタマイズできるため、デザインに合わせた実装が可能です。

  • fine-uploader:

    Fine Uploaderは、豊富なオプションを提供し、特に複雑な要件に対して高いカスタマイズ性を持っています。

使用シナリオ

  • multer:

    Multerは、Node.jsを使用したサーバーサイドのファイルアップロード処理に特化しており、Express.jsと組み合わせて使用する場合に最適です。

  • react-dropzone:

    React Dropzoneは、Reactアプリケーションにおいて、シンプルかつ効率的にファイルアップロード機能を実装したい場合に最適です。

  • dropzone:

    Dropzoneは、シンプルなファイルアップロードが必要なプロジェクトに最適です。特に、ユーザーが直感的に操作できるインターフェースを求める場合に適しています。

  • fine-uploader:

    Fine Uploaderは、複雑なファイルアップロード要件がある場合に適しており、特に大規模なアプリケーションでの使用に向いています。

選び方: multer vs react-dropzone vs dropzone vs fine-uploader
  • multer:

    Multerは、Node.jsのミドルウェアとして機能し、サーバーサイドでのファイルアップロード処理を簡素化します。Express.jsと組み合わせて使用する場合に最適です。

  • react-dropzone:

    React Dropzoneは、Reactアプリケーションに特化したファイルアップロードのためのライブラリで、Reactのコンポーネントとして簡単に統合できます。特にReactを使用しているプロジェクトにおいて、使いやすさと柔軟性を提供します。

  • dropzone:

    Dropzoneは、ドラッグアンドドロップインターフェースを簡単に実装したい場合に最適です。カスタマイズ性が高く、スタイリングも容易で、シンプルなAPIを提供しています。

  • fine-uploader:

    Fine Uploaderは、複雑なアップロード機能を必要とする場合に適しています。多くのオプションと設定があり、特に大きなファイルのアップロードや複数ファイルの同時アップロードに強みがあります。

multer のREADME

Multer NPM Version NPM Downloads Build Status Test Coverage OpenSSF Scorecard Badge

Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files. It is written on top of busboy for maximum efficiency.

NOTE: Multer will not process any form which is not multipart (multipart/form-data).

Translations

This README is also available in other languages:

العربيةArabic
简体中文Chinese
FrançaisFrench
한국어Korean
PortuguêsPortuguese (BR)
Русский языкRussian
EspañolSpanish
O'zbek tiliUzbek
Việt NamVietnamese

Installation

$ npm install multer

Usage

Multer adds a body object and a file or files object to the request object. The body object contains the values of the text fields of the form, the file or files object contains the files uploaded via the form.

Basic usage example:

Don't forget the enctype="multipart/form-data" in your form.

<form action="/profile" method="post" enctype="multipart/form-data">
  <input type="file" name="avatar" />
</form>
const express = require('express')
const multer  = require('multer')
const upload = multer({ dest: 'uploads/' })

const app = express()

app.post('/profile', upload.single('avatar'), function (req, res, next) {
  // req.file is the `avatar` file
  // req.body will hold the text fields, if there were any
})

app.post('/photos/upload', upload.array('photos', 12), function (req, res, next) {
  // req.files is array of `photos` files
  // req.body will contain the text fields, if there were any
})

const uploadMiddleware = upload.fields([{ name: 'avatar', maxCount: 1 }, { name: 'gallery', maxCount: 8 }])
app.post('/cool-profile', uploadMiddleware, function (req, res, next) {
  // req.files is an object (String -> Array) where fieldname is the key, and the value is array of files
  //
  // e.g.
  //  req.files['avatar'][0] -> File
  //  req.files['gallery'] -> Array
  //
  // req.body will contain the text fields, if there were any
})

In case you need to handle a text-only multipart form, you should use the .none() method:

const express = require('express')
const app = express()
const multer  = require('multer')
const upload = multer()

app.post('/profile', upload.none(), function (req, res, next) {
  // req.body contains the text fields
})

Here's an example on how multer is used in a HTML form. Take special note of the enctype="multipart/form-data" and name="uploaded_file" fields:

<form action="/stats" enctype="multipart/form-data" method="post">
  <div class="form-group">
    <input type="file" class="form-control-file" name="uploaded_file">
    <input type="text" class="form-control" placeholder="Number of speakers" name="nspeakers">
    <input type="submit" value="Get me the stats!" class="btn btn-default">
  </div>
</form>

Then in your javascript file you would add these lines to access both the file and the body. It is important that you use the name field value from the form in your upload function. This tells multer which field on the request it should look for the files in. If these fields aren't the same in the HTML form and on your server, your upload will fail:

const multer  = require('multer')
const upload = multer({ dest: './public/data/uploads/' })
app.post('/stats', upload.single('uploaded_file'), function (req, res) {
  // req.file is the name of your file in the form above, here 'uploaded_file'
  // req.body will hold the text fields, if there were any
  console.log(req.file, req.body)
});

API

File information

Each file contains the following information:

KeyDescriptionNote
fieldnameField name specified in the form
originalnameName of the file on the user's computer
encodingEncoding type of the file
mimetypeMime type of the file
sizeSize of the file in bytes
destinationThe folder to which the file has been savedDiskStorage
filenameThe name of the file within the destinationDiskStorage
pathThe full path to the uploaded fileDiskStorage
bufferA Buffer of the entire fileMemoryStorage

multer(opts)

Multer accepts an options object, the most basic of which is the dest property, which tells Multer where to upload the files. In case you omit the options object, the files will be kept in memory and never written to disk.

By default, Multer will rename the files so as to avoid naming conflicts. The renaming function can be customized according to your needs.

The following are the options that can be passed to Multer.

KeyDescription
dest or storageWhere to store the files
fileFilterFunction to control which files are accepted
limitsLimits of the uploaded data
preservePathKeep the full path of files instead of just the base name

In an average web app, only dest might be required, and configured as shown in the following example.

const upload = multer({ dest: 'uploads/' })

If you want more control over your uploads, you'll want to use the storage option instead of dest. Multer ships with storage engines DiskStorage and MemoryStorage; More engines are available from third parties.

.single(fieldname)

Accept a single file with the name fieldname. The single file will be stored in req.file.

.array(fieldname[, maxCount])

Accept an array of files, all with the name fieldname. Optionally error out if more than maxCount files are uploaded. The array of files will be stored in req.files.

.fields(fields)

Accept a mix of files, specified by fields. An object with arrays of files will be stored in req.files.

fields should be an array of objects with name and optionally a maxCount. Example:

[
  { name: 'avatar', maxCount: 1 },
  { name: 'gallery', maxCount: 8 }
]

.none()

Accept only text fields. If any file upload is made, error with code "LIMIT_UNEXPECTED_FILE" will be issued.

.any()

Accepts all files that comes over the wire. An array of files will be stored in req.files.

WARNING: Make sure that you always handle the files that a user uploads. Never add multer as a global middleware since a malicious user could upload files to a route that you didn't anticipate. Only use this function on routes where you are handling the uploaded files.

storage

DiskStorage

The disk storage engine gives you full control on storing files to disk.

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, '/tmp/my-uploads')
  },
  filename: function (req, file, cb) {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
    cb(null, file.fieldname + '-' + uniqueSuffix)
  }
})

const upload = multer({ storage: storage })

There are two options available, destination and filename. They are both functions that determine where the file should be stored.

destination is used to determine within which folder the uploaded files should be stored. This can also be given as a string (e.g. '/tmp/uploads'). If no destination is given, the operating system's default directory for temporary files is used.

Note: You are responsible for creating the directory when providing destination as a function. When passing a string, multer will make sure that the directory is created for you.

filename is used to determine what the file should be named inside the folder. If no filename is given, each file will be given a random name that doesn't include any file extension.

Note: Multer will not append any file extension for you, your function should return a filename complete with a file extension.

Each function gets passed both the request (req) and some information about the file (file) to aid with the decision.

Note that req.body might not have been fully populated yet. It depends on the order that the client transmits fields and files to the server.

For understanding the calling convention used in the callback (needing to pass null as the first param), refer to Node.js error handling

MemoryStorage

The memory storage engine stores the files in memory as Buffer objects. It doesn't have any options.

const storage = multer.memoryStorage()
const upload = multer({ storage: storage })

When using memory storage, the file info will contain a field called buffer that contains the entire file.

WARNING: Uploading very large files, or relatively small files in large numbers very quickly, can cause your application to run out of memory when memory storage is used.

limits

An object specifying the size limits of the following optional properties. Multer passes this object into busboy directly, and the details of the properties can be found on busboy's page.

The following integer values are available:

KeyDescriptionDefault
fieldNameSizeMax field name size100 bytes
fieldSizeMax field value size (in bytes)1MB
fieldsMax number of non-file fieldsInfinity
fileSizeFor multipart forms, the max file size (in bytes)Infinity
filesFor multipart forms, the max number of file fieldsInfinity
partsFor multipart forms, the max number of parts (fields + files)Infinity
headerPairsFor multipart forms, the max number of header key=>value pairs to parse2000

Specifying the limits can help protect your site against denial of service (DoS) attacks.

fileFilter

Set this to a function to control which files should be uploaded and which should be skipped. The function should look like this:

function fileFilter (req, file, cb) {

  // The function should call `cb` with a boolean
  // to indicate if the file should be accepted

  // To reject this file pass `false`, like so:
  cb(null, false)

  // To accept the file pass `true`, like so:
  cb(null, true)

  // You can always pass an error if something goes wrong:
  cb(new Error('I don\'t have a clue!'))

}

Error handling

When encountering an error, Multer will delegate the error to Express. You can display a nice error page using the standard express way.

If you want to catch errors specifically from Multer, you can call the middleware function by yourself. Also, if you want to catch only the Multer errors, you can use the MulterError class that is attached to the multer object itself (e.g. err instanceof multer.MulterError).

const multer = require('multer')
const upload = multer().single('avatar')

app.post('/profile', function (req, res) {
  upload(req, res, function (err) {
    if (err instanceof multer.MulterError) {
      // A Multer error occurred when uploading.
    } else if (err) {
      // An unknown error occurred when uploading.
    }

    // Everything went fine.
  })
})

Custom storage engine

For information on how to build your own storage engine, see Multer Storage Engine.

License

MIT