CODEWITHSUNDEEP
javascriptnode.jsfilefile-uploadmulter
costa costa
costa costa

Reputation: 199

Multer not uploading file

I am trying to use multer to upload a file from an html form on the client side to the server side, the multer module processes the file on the server side.

The thing here is that everything is ok, because i get the 200 ok response from the server, but the file should be uploaded to my fileSystem and i can't see it.

This is my html form

<template>
  <div id="app">
    <form action="http://localhost:3000/upload" method="post" enctype="multipart/form-data">
      <h2>Select a file</h2>
      <input name="curriculum" id="inputVal" type="file">
      <button type="submit">Send</button>
    </form>
  </div>
</template>

my server side code

var express = require('express');
var router = express.Router();
var path = require('path');
var fs = require('fs');
var multer  = require('multer')
var storage = multer.diskStorage({
  destination: function(req,file,callback) {
    callback(null, '../files');
  },
  filename: function(req,file,callback) {
    callback(null,Date.now() + file,callback);
  }

})
var upload = multer({ storage: storage }).single('curriculum');

router.post('/upload', function (req, res, next) {
  upload(req,res, function(err){
    if(err) {
      return res.status(404).send("a error ocurred");
    }
    res.status(200).send("file uploaded");
  });
});

module.exports = router;

UPDATE

I changed my solution based on the npm multer website (server side)

var express = require('express');
var router = express.Router();
var path = require('path');
var fs = require('fs');
var multer  = require('multer')
var upload = multer({ dest: 'uploads/' });

router.post('/upload',upload.single('curriculum') ,function (req, res, next) {
  console.log(req.files);
});

module.exports = router;

Ty for the help!

Upvotes: 2

Views: 14750

Answers (3)

Rahul Kumar
Rahul Kumar

Reputation: 1

import multer from "multer";

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "E:/webDevelopment/chai backend" + "/public/temp");
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname);
  },
});

export const upload = multer({
  storage,
});

if your are using all this code inside the middleware file then remember always write all directory in destination as I have written .

their is a problem if you are using multer in another file , it doesn't identify where the public/temp file is located .

Upvotes: 0

Rex Anthony
Rex Anthony

Reputation: 91

For those having an issue with multer not uploading the file to the destination folder, I found it useful to use the absolute path, rather than a relative path.

Something like this (Absolute path to the node js root directory)
public/images/pics

Is better than (Relative path)
../public/images/pics

or (Relative path)
./public/images/pics

That worked for me

Upvotes: 8

C.Unbay
C.Unbay

Reputation: 2826

You are not specifying the file you want to upload. Put the name of the input.

router.post('/upload', upload.single('curriculum'), function (req, res, next) {
    if(err) {
      console.log(err);
      return res.status(404).send("a error ocurred");
    }
    console.log(req.file);
    res.status(200).send("file uploaded");
});

Also in your file name, make sure your file ends with an extension such as .png or .jpeg otherwise you will see bunch of bytecodes that do not mean anything.

You can either get the exact file name that your client gives you by using file.originalname

cb(null, file.originalname)

Or you can add it explicitly.

callback(null, file.fieldname + '-' + Date.now() + '.png')

You might want to remove the third parameter of callback(null,Date.now() + file,callback) which is callback as it might be bugging the program, and change + file to something like + file.originalname because file is an object and the computer might be having problems attending an object to a file name.

UPDATE

Main NODEJS

var express = require('express')
var multer  = require('multer')
var app = express()

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, __dirname + '/uploads')      //you tell where to upload the files,
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + '.png')
  }
})

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

app.set('view engine', 'ejs');

app.get('/', function(req, res, next){    
    res.render('mult');  //our html document
})

app.post('/profile', upload.single('avatar'), function (req, res, next) {
  // req.file is the `avatar` file
  console.log(req.file);
  return false;
})

HTML FORM

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form accept="image/x-png,image/gif,image/jpeg" enctype="multipart/form-data" action="/profile" method="post">
      <input type="file" name="avatar" value="">
      <input type="submit" name="" value="ssss">
    </form>
  </body>
</html>

Upvotes: 3

Related Questions