CODEWITHSUNDEEP
javascriptnode.jsexpressfile-upload
Edwin Rodriguez
Edwin Rodriguez

Reputation: 163

uploading file using multer is not working fully (NodeJS)

I am using NodeJS express (MVC) and I am trying to upload an image. I am trying to store the image in an uploads folder but nothing is showing up. When I console.log(req.files), I get the following (req.buffer prints out a long series of double digit numbers and letters). How do I get this to save the image in the folder? 

 [ 
   { 
     fieldname: 'file',
     originalname: 'thumbnail.jpg',
     encoding: '7bit',
     mimetype: 'image/jpeg',
     buffer: <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 01 00 01 00 00 ff db 00 84 00 09 06 07 0d 0d 10 0e 10 0d 0e 0d 0d 0d 0e 10
 0f 0d 0d 0e 0d 0d 0f  0e 0e 0e ... >,
     size: 1347 
   } 
]

HTML:

<form action="/bars/upload" method = 'post' enctype="multipart/form-data">
   <label for='file'>Upload Image</label>
   <input type="file" name="file" accept="image/*"/>
   <input type="submit" name='submit' value="submit"/>
</form>

NODE JS

var multer  = require('multer'); 
var upload = multer({ dest:'../public/uploads/' });

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

Upvotes: 1

Views: 10193

Answers (3)

Vfx Master
Vfx Master

Reputation: 27

i had the same issue in dest:'../public/uploads/' just remove ../ and write it like this dest:'public/uploads/' thats it

Upvotes: 1

Mihail
Mihail

Reputation: 83

I had the same problem. I used Postman to make queries to my node app. The problem solved, when I removed http header Content-Type (it was set as urlencoded form).

Upvotes: 2

Taku
Taku

Reputation: 5918

multer is basically a middleware that uploads files or convert to some format which could be used later in the handler. So, from examples, you could do this in your case:

var multer = require('multer'); 
var upload = multer({ dest:'../public/uploads/' });

router.post('/bars/upload', upload.single('someFile') ,function (req, res, next) {

    // if you're here, the file should have already been uploaded

    console.log(req.files); 
    console.log(req.body);// {"someParam": "someValue"}
    res.send(req.files); 
});

upload.html

<form action="/bars/upload" method = 'post' enctype="multipart/form-data">
    <label for='file'>Upload Image</label>
    <input type="file" name="someFile" accept="image/*"/>
    <input type="hidden" name="someParam" value="someValue"/>
    <input type="submit" name='submit' value="submit"/>
</form>

If this does not work, you can debug by using command line, which usually helps me determine whether server or client is at fault.

curl --form "someFile=@/path/to/file" -X POST http://localhost:3000/bars/upload

add -I option to show verbose response.

Upvotes: 3

Related Questions