Multer is not uploading a file to the server

Question

I am trying to upload a file to a server via Multer. All this code does is it creates the folder but not the file. I also tried to use a tutorial on github but no luck either My code on frontend

<p class="font-weight-bolder mb-3">Upload Screenshot
    <form enctype="multipart/form-data"></form><input id="uploadFile" type="file" name="image" />
</p>

The code AJAX

$('#uploadFile').on('change', function(){
  var file = $(this).get(0).files[0];
  console.log(typeof file);
  console.log(file)
  console.log(file.name)
  var formData = new FormData();
  formData.append('Upload', file, file.name);
  $.ajax({
    url: $(this).attr('action') || window.location.pathname + '/repr_screenshot',
    type: "POST",
    data: file,
    cache: false,
    processData: false,
    success: function(data){
      console.log("success")
    },
    error: function(data){
      console.log("file not uploaded")
    }
  });
})

And the MAIN.JS

var multer  = require('multer')

var storage = multer.diskStorage({
  destination: 'views/repr/mixin/screenshots',
  filename: '/file.png'})

var upload = multer({storage: storage,
  onFileUploadStart: function (file) {
    console.log(file.originalname + ' is starting ...')
  }
});

router.post('/repr_screenshot', upload.single('image'), function (req, res, next) {
  console.log(req.file);
  return false;
})

The console.log output I get from frontend:

Object

File {name: "Capture.PNG", lastModified: 1597907180050, lastModifiedDate: Thu Aug 20 2020 10:06:20 GMT+0300 (Eastern European Summer Time), webkitRelativePath: "", size: 89172, …}

Capture.PNG

And the output of console.log(req.file) is "Undefined"

Pritthish Nath · Answer 1 · 2020-08-27T14:31:15.310

0

destination and filename both properties should be function. docs reference here

const storage = multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, "views/repr/mixin/screenshots");
  },
  filename: function (req, file, callback) {
    callback(null, file.originalname);
  },
});

const upload = multer({ storage: storage }).single("image");


router.post("/repr_screenshot", (req, res) => {
  upload(req, res, (err) => {
    if (err) {
      console.log(err);
      return res.end("error file uploading");
    }
    res.status(200);
  });
});

Let me know if there any issue.

UPDATE: The destination folder should be existed before uploading.

I have change the .single('file') to .single('image') as your fieldname.

edited Aug 27 '20 at 14:31

answered Aug 27 '20 at 14:11

Pritthish Nath

151
1
8

It doesn't give any issues, however, still won't upload the file and now even does not create a folder – Alex Shangin Aug 27 '20 at 14:21
Please check the updated code. And you have to create the destination folder beforehand, as per the docs. If you want dynamically created folders, you can use the packege mkdirp or fs. Reference: https://stackoverflow.com/questions/21194934/how-to-create-a-directory-if-it-doesnt-exist-using-node-js – Pritthish Nath Aug 27 '20 at 14:35
I've created the folder and changed 'file' to 'image' but unfortunately the issue still remains – Alex Shangin Aug 27 '20 at 15:09

Multer is not uploading a file to the server

1 Answers1