How to upload a file in node.js server using multer

Question

I'm trying to pass a file from my Angular app to a node.js server.

When I run the app, I get the following error: Error: Please choose files

HTML:

<upload name="fileUpload" formControlName="fileUpload" #fileUpload (listChange)="updateList($event)" data-kind="primary"
          [imagePreview]="true">
</upload>

Here is my updateList() method:

updateList(list: any) {
    this.demolist = Array.apply(this, list);
    this.attachmentReady.emit(this.demolist);
}

Node:

const express = require('express')
const app = express()
const bodyParser = require('body-parser')
const multer = require('multer');
let nodemailer = require('nodemailer');
let aws = require('aws-sdk');
const fs = require('fs');

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads')
    },
    filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
    }
});

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

app.post('/postData', upload.array('fileUpload', 12), (req, res, next) => {
    console.log(req.body);
    res.json(req.body);

    const files = req.files
    if (!files) {
        const error = new Error('Please choose files')
        error.httpStatusCode = 400
        return next(error)
    }
    res.send(files);
}

In a different project, multer is working as expected. Below is the HTML from that project:

<form action="/uploadmultiple" enctype="multipart/form-data" method="POST">
    Select images: <input type="file" name="myFiles" multiple>
    <input type="submit" value="Upload your files" />
</form>

The difference between my working code & the code that isn't working is that I'm able to use a standard input control if the type is file. But I need to use an upload control now & my code isn't working when I make that one change.

Can someone please tell me how I can use this control to pass the file? Thanks a lot in advance!

Gaurav Umrani · Accepted Answer · 2019-05-13 13:35:37Z

1

After you have installed multer using npm install --save multer

Basic usage example:

var express = require('express')
var multer  = require('multer')
var upload = multer({ dest: 'uploads/' })

var app = express()

app.post('/uploadmultiple', upload.single('myFiles'), function (req, res, next) {
  // req.file is the `myFiles ` file
  // req.body will hold the text fields, if there were any
})

app.post('/uploadmultiple', upload.array('myFiles', 12), function (req, res, next) {
  // req.files is array of `photos` files
  // req.body will contain the text fields, if there were any
})

For more information you can read documentation here

answered May 13, 2019 at 13:35

Gaurav Umrani

1344 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user9847788 Over a year ago

Hi, thanks for your answer. I've actually got multer working on a smaller project, the same way as you've shown here. But in my project now, I need to use a upload control from a 3rd party rather than a standard input control. Is the reason my code isn't working because the upload.array() method in the node.js needs the name of the control in the HTML?

user9847788 Over a year ago

I've updated my code above with the name attribute, but I am still getting the same error message.

Gaurav Umrani Over a year ago

does the upload component gives formData in onChange event, then your work can be done easily

user9847788 Over a year ago

I've added my updateList() method code above. This is executed when a file is uploaded using that upload control. When this is executed, this is printed to the console:

demo list - [{"file":{},"id":0,"icon":"doc","src":{"changingThisBreaksApplicationSecurity":"data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,"}}] send.component.ts:50:4 files - [{"file":{},"id":0,"icon":"doc","src":{"changingThisBreaksApplicationSecurity":"data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,"}}]

Collectives™ on Stack Overflow

How to upload a file in node.js server using multer

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related