Implementing multer diskStorage with Typescript

Question

Implementing multer diskStorage with Typescript

I'm currently in the process of converting a node.js server to TypeScript.

Here is what my function looks like in Node:

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        const dir = './uploads/';
        mkdirp(dir, err => cb(err, dir));
    },
    filename: function (req, file, cb) {
        cb(null, file.originalname)
    }
});

const upload = multer({
    storage: storage
});

router.post('/test', upload.fields({name: 'image'}), async function (req, res, next) {
...
});

However, I have encountered several errors during this conversion. For instance, I am unable to declare the file argument as type Express.File, 'memoryStorage' does not accept arguments, and mkdirp gives me an error stating that it cannot be called.

node.js typescript server storage multer

Answer 1

Answer №1

Here is my solution that utilizes the type definitions provided by @types/multer.

If you have not done so already, start by installing the type definitions for the multer package:

npm i --save-dev @types/multer

Imports and `type` aliases

import { Request } from 'express'
import multer, { FileFilterCallback } from 'multer'

type DestinationCallback = (error: Error | null, destination: string) => void
type FileNameCallback = (error: Error | null, filename: string) => void

Setting up `storage`

export const fileStorage = multer.diskStorage({
    destination: (
        request: Request,
        file: Express.Multer.File,
        callback: DestinationCallback
    ): void => {
        // ...Implementation goes here.
    },

    filename: (
        req: Request, 
        file: Express.Multer.File, 
        callback: FileNameCallback
    ): void => {
        // ...Implementation goes here.
    }
})

Implementing `fileFilter`

export const fileFilter = (
    request: Request,
    file: Express.Multer.File,
    callback: FileFilterCallback
): void => {
    if (
        file.mimetype === 'image/png' ||
        file.mimetype === 'image/jpg' ||
        file.mimetype === 'image/jpeg'
    ) {
        callback(null, true)
    } else {
        callback(null, false)
    }
}

For better code organization and separation of concerns, consider placing the above two constants in a separate file like config/multer.ts or util/multer.ts

Application

Import and utilize the above constants in your app.ts or server.ts:

app.use(multer({ storage: fileStorage, fileFilter: fileFilter })

Answer 2

Here is my solution that utilizes the type definitions provided by @types/multer.

If you have not done so already, start by installing the type definitions for the multer package:

npm i --save-dev @types/multer

Imports and `type` aliases

import { Request } from 'express'
import multer, { FileFilterCallback } from 'multer'

type DestinationCallback = (error: Error | null, destination: string) => void
type FileNameCallback = (error: Error | null, filename: string) => void

Setting up `storage`

export const fileStorage = multer.diskStorage({
    destination: (
        request: Request,
        file: Express.Multer.File,
        callback: DestinationCallback
    ): void => {
        // ...Implementation goes here.
    },

    filename: (
        req: Request, 
        file: Express.Multer.File, 
        callback: FileNameCallback
    ): void => {
        // ...Implementation goes here.
    }
})

Implementing `fileFilter`

export const fileFilter = (
    request: Request,
    file: Express.Multer.File,
    callback: FileFilterCallback
): void => {
    if (
        file.mimetype === 'image/png' ||
        file.mimetype === 'image/jpg' ||
        file.mimetype === 'image/jpeg'
    ) {
        callback(null, true)
    } else {
        callback(null, false)
    }
}

For better code organization and separation of concerns, consider placing the above two constants in a separate file like config/multer.ts or util/multer.ts

Application

Import and utilize the above constants in your app.ts or server.ts:

app.use(multer({ storage: fileStorage, fileFilter: fileFilter })

Answer 3

Answer №2

The code snippet below successfully generated a unique identifier for my files:

   const uniqueIdGenerator = require('uuid/v1');

   // Setup storage configuration
   const storage = multer.diskStorage({
       destination: function (req: Express.Request, file: Express.Multer.File, callback: (error: Error | null, destination: string) => void) {
        callback(null, './upload/');
    },
    filename: function (req: Request, file: Express.Multer.File, callback: (error: Error | null, filename: string) => void) {
        const uniqueId = uniqueIdGenerator();
        callback(null, uniqueId + '_' + file.originalname);
    }
});

Answer 4

The code snippet below successfully generated a unique identifier for my files:

   const uniqueIdGenerator = require('uuid/v1');

   // Setup storage configuration
   const storage = multer.diskStorage({
       destination: function (req: Express.Request, file: Express.Multer.File, callback: (error: Error | null, destination: string) => void) {
        callback(null, './upload/');
    },
    filename: function (req: Request, file: Express.Multer.File, callback: (error: Error | null, filename: string) => void) {
        const uniqueId = uniqueIdGenerator();
        callback(null, uniqueId + '_' + file.originalname);
    }
});

Answer 5

Answer №3

This is how I implemented it in my specific situation.

const uniqueIDGenerator = require('uuid/v1');

const fileSystem = multer.diskStorage({
  destination: (request, file, callBack) => {
    callBack(null, path.resolve('./upload/'))
  },
  filename: (req, file, callback) => {
    const uniqueID = uniqueIDGenerator();
    callback(null, `${uniqueID}-${file.originalname}`);
  }
});

Answer 6

This is how I implemented it in my specific situation.

const uniqueIDGenerator = require('uuid/v1');

const fileSystem = multer.diskStorage({
  destination: (request, file, callBack) => {
    callBack(null, path.resolve('./upload/'))
  },
  filename: (req, file, callback) => {
    const uniqueID = uniqueIDGenerator();
    callback(null, `${uniqueID}-${file.originalname}`);
  }
});

Answer 7

Answer №4

Success! I was able to make it work with some adjustments :)

const fileStorage = multer.diskStorage({
    destination: function (req: Request, _file: any, cb: Function) {
        const path = './uploads/';
        mkdirp(path, (error: NodeJS.ErrnoException) => {
            cb(error, path)
        });
    },
    filename: function (_request: Request, file: any, cb: Function) {
        cb(null, file.originalname)
    }
});

const fileUpload = multer({
    storage: fileStorage
});

Answer 8

Success! I was able to make it work with some adjustments :)

const fileStorage = multer.diskStorage({
    destination: function (req: Request, _file: any, cb: Function) {
        const path = './uploads/';
        mkdirp(path, (error: NodeJS.ErrnoException) => {
            cb(error, path)
        });
    },
    filename: function (_request: Request, file: any, cb: Function) {
        cb(null, file.originalname)
    }
});

const fileUpload = multer({
    storage: fileStorage
});

Implementing multer diskStorage with Typescript

Answer №1

Imports and `type` aliases

Setting up `storage`

Implementing `fileFilter`

Application

Answer №2

Answer №3

Answer №4

Similar questions

Build a KeystoneJS website without using the generator-keystone tool

Issue: Debug Failure. Invalid expression: import= for internal module references should have been addressed in a previous transformer

Using Node.js and Express to create a MySQL API that outputs a JSON array as a string

The connected module appears as an unresolved requirement

search for a specific value within a nested subfield of an asterisk star field in Firestore

Typescript - optional type when a generic is not given

Error: Expected an Image or Canvas as input

Getting the Hostname in a NestJS Controller Function

Having trouble with res.redirect not working after the page has been rendered with data?

Node script causing occasional corruption in JSON file

What are the steps to developing a chat application with MERN stack or another straightforward method?

Obtaining the node-webkit GUI object from an HTML file that has been generated by Express

Tips for confirming a date format within an Angular application

Encountered an error while attempting to load resource in Node.js

What steps are involved in constructing Jodit from scratch?

What could be the cause of this situation?

What could be causing Heroku to encounter issues while compiling the build of the project?

Unforeseen Problem: Mocha ES6 Node App Glitch

Error Encountered: AJAX Request Failed with 400 Bad Request

The body function in Express-validator is not working as expected

Implementing multer diskStorage with Typescript

Answer №1

Imports and type aliases

Setting up storage

Implementing fileFilter

Application

Answer №2

Answer №3

Answer №4

Similar questions

Build a KeystoneJS website without using the generator-keystone tool

Issue: Debug Failure. Invalid expression: import= for internal module references should have been addressed in a previous transformer

Using Node.js and Express to create a MySQL API that outputs a JSON array as a string

The connected module appears as an unresolved requirement

search for a specific value within a nested subfield of an asterisk star field in Firestore

Typescript - optional type when a generic is not given

Error: Expected an Image or Canvas as input

Getting the Hostname in a NestJS Controller Function

Having trouble with res.redirect not working after the page has been rendered with data?

Node script causing occasional corruption in JSON file

What are the steps to developing a chat application with MERN stack or another straightforward method?

Obtaining the node-webkit GUI object from an HTML file that has been generated by Express

Tips for confirming a date format within an Angular application

Encountered an error while attempting to load resource in Node.js

What steps are involved in constructing Jodit from scratch?

What could be the cause of this situation?

What could be causing Heroku to encounter issues while compiling the build of the project?

Unforeseen Problem: Mocha ES6 Node App Glitch

Error Encountered: AJAX Request Failed with 400 Bad Request

The body function in Express-validator is not working as expected

Imports and `type` aliases

Setting up `storage`

Implementing `fileFilter`