API File Upload Angular Express Backend

This article is for you if
* You want to upload a file from the client side via API (I’m doing via Angular. You can do same anywhere
* You want to receive the uploaded file from the client side via API in your backend (Express)

Here we go. Stay with me. I’m writing this article out of frustration of how vast information on the internet is, yet none makes the most, minimal, barebone sense (sometimes).

Let’s start with the form

The File Input

When the uploadFile(...) is triggered, we handle that in the component like so:

  uploadFile(files) {
    const formDataForm = new FormData();
    myForm.append('toUpload', files[0]); // the toUpload is the name of the file. You can call it anything you like
    // if uploading 1 file, we only need to target the 
    // the zero index of the files array 

    this.http
      .post('http://yourendpoint.com/api/v1/files', formDataForm, {
        headers: {
          Authorization: localStorage.getItem('token') // assuming authorization is required to upload
        }
      })
      .subscribe(res => {
        console.log(res);
      });
  }

With the above, we’re good to go

Backend API Express

Install and use express-fileupload like so
const fileUpload = require('express-fileupload');

Now let’s tell Express to use it
app.use(fileUpload());

Next, we make use of it in our routes. Something like this:

app.post('/', function (req, res) {
  console.log(req.files);

  res.json({    
  'state': true,
  'msg': 'Came through loud and clear',
  'data': req.files
})

If all went well, console.log(req.files) should show something like this:

If you got something like the above, Bingo

All the best.