Multer Doesn't Save Images on Disk In Any Way

Question

It simply doesn't save anything to the destination folder i specified.

i tried {storage:storage} instead of {dest: 'storage/'} but it didn't work either. the image data is actually sent to the server as its console logged. and the dest i specified is created by default but remain empty.

const express = require('express');
const app = express();
const multer = require('multer');
    let storage = multer.diskStorage({
        destination: '/public/my-uploads',
          filename: function (req, file, cb) {
            cb(null, file.fieldname + '-' + Date.now())
          }
    });

const upload = multer({dest:'storage/'}).single('file');


app.post('/upload', upload, (req , res) => {
  console.log(req.files) // this does log the uploaded image data.
})


***** EDIT ******

HTML

        <form  onSubmit={this.upload} enctype='multipart/form-data'>
          <input type='file' name='image' />
          <input type='submit' value='upload' />
        </form>

JS

  upload(e){
    e.preventDefault();
    const file = e.target[0].files[0];
    console.log(file)
    const fm = new FormData();

    fm.append('file', file);
    console.log(fm)
    axios.post('/upload', fm);
  }

POSTMAN

possibly duplicate of https://stackoverflow.com/questions/23114374/file-uploading-with-express-4-0-req-files-undefined/47826310#47826310 — Parth Raval, Jun 24 '18 at 06:00

Matt Kuhns · Answer 1 · 2018-06-24T05:36:04.357

1

Try to catch the error my calling the middleware yourself:

var upload = multer().single('avatar')
app.post('/upload', function (req, res) {
  upload(req, res, function (err) {
    if (err) {
      // An error occurred when uploading
      return
    }

    // Everything went fine
  })
})

Also, change the storage to this:

let storage = multer.diskStorage({
    destination: function(req, file, ca) {
        cb(null, '/public/my-uploads');
    }
    filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now())
    }
});

edited Jun 24 '18 at 05:36

answered Jun 24 '18 at 05:26

Matt Kuhns

1,328
1
13
26

I tried before and tried now again. theres NO ERROR printing!! but it doesn't actually save anything to the folder. – ANUBIS Jun 24 '18 at 05:28

score 1 · Accepted Answer · answered Nov 15 '21 at 02:59

1

It's been a while, the issue was that I wasn't using the multer middleware at all so the callback code for handling the image was never executed. I didn't know much about how express worked back then.

answered Nov 15 '21 at 02:59

ANUBIS

666
1
9
20

1

hi @Biss can you let me know how did you fix this? i'm having the same issue. How did you use the middleware? – Ilir Jan 01 '22 at 23:54

Constantin Guidon · Answer 3 · 2018-06-24T15:58:26.293

0

Seems you are not using the storage variable and use a function for the destination key, as written in the documentation, also you need to pass your file in the input field named field otherwise multer can't store the file, create an storage folder on the same level as the code :

const http = require('http')
const port = 3000
const express = require('express');
const app = express();
const multer = require('multer');
const server = http.createServer(app)

let storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './storage')
    },
    filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now())
    }
});

const upload = multer({ storage }).single('file');


app.post('/upload', upload, (req, res) => {
    console.log(req.files) // this does log the uploaded image data.
})

// bind the server on port
server.listen(port, (err) => {
    if (err) {
        return console.log('something bad happened', err)
    }
    console.log(`server is listening on ${port}`)
})

edited Jun 24 '18 at 15:58

answered Jun 24 '18 at 05:24

Constantin Guidon

1,892
16
21

Yea, same problem. – ANUBIS Jun 24 '18 at 05:25
did use the field `field` in your form for send the file ? @SharlSherif – Constantin Guidon Jun 24 '18 at 05:28
you need to pass your file in the input field named `field` otherwise multer can't store the file – Constantin Guidon Jun 24 '18 at 05:29
the name of the form field should be file – Constantin Guidon Jun 24 '18 at 05:34
jesus!! i have the same exact code and it only creates the folder and nothing else.. – ANUBIS Jun 24 '18 at 15:26

score 0 · Answer 4 · answered May 17 '21 at 16:50

The name of the "single" in ...single('file') must match the name in the input (containing the file) <input type="file" name='image' /> - and it does not in your example.

Change the multer-part to this ...single('image') - as in the input name='image'

score 0 · Answer 5 · answered Sep 20 '21 at 07:51

Try this File Storage For Save image in Local

const fileStorage = multer.diskStorage({
      destination: (req, file, cb) => {
        cb(null, "images");
      },
      filename: (req, file, cb) => {
        cb(
          null,
          new Date().toISOString().replace(/:/g, "-") + "-" + file.originalname
        );
      },
    });

score 0 · Answer 6 · answered May 27 '23 at 14:43

0

You need to create folder /public/my-uploads first then you can save your file. I am currently learn nodejs and face this issue.

answered May 27 '23 at 14:43

hungviet511

1

HI, maybe you solved your problem creating that directory, but there is a completely different answer, marked as accepted – pierpy May 27 '23 at 15:55
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 27 '23 at 15:55

Multer Doesn't Save Images on Disk In Any Way

6 Answers6