File Upload with Angular 2 and Node.js

File Upload is one of those things that is not as straight forward but gets easier once we get our heads around it. In this tutorial, we will see how we can implement File Upload using Angular 2 and Node.js. We have already covered Angular 1 variation of this topic in one of our previous tutorial.

Back-end with NodeJS/ ExpressJS and Multer

The back-end implementation for File Upload with Node.js is more or less similar to the one we did in our post for file upload with Angular 1 and Node. There is only one change and that is we will be enabling CORS on our Node server. So here I’ll just display the code, for a detailed explanation please visit this link.

If everything was setup properly you should be able to see the following output on the console.

Node.js server

Browser Application with Angular 2 and ng2-File-Upload

Since you are here, and looking to implement file-upload in Angular 2, I think it’s safe to assume that you have a basic Angular 2 application ready and that your machine is setup to run Angular 2 application. So I’ll skip the setup part and start with a basic pre-built Angular 2 application. If you still wish to know the basics in Angular 2 you can visit the below articles.

We will be using ng2-file-upload library to help us with the File Upload for our Angular 2 application. Let’s install it using npm.

npm install ng2-file-upload --save

Now we need to configure our module loader to recognize and find ng2-file-upload. The configuration would be specific to the module loader you are using. For this tutorial, we are using Systems.js as our module loader, so we will see the configuration for the same.

We are passing the upload URL of our Node.js application which we created earlier in the tutorial in the argument object of FileUploader.
To make this work in our template we will add a ng2FileSelect directive to an html input of type file, we will also set the [uploader] property to our uploader object.

To enable selection of multiple files we only need to add the multiple attribute of HTML5.
The uploader object stores all the selected files in a queue. To upload all the file at once we can call uploader.uploadAll() function or we can call the upload() function availaible on each item of the queue.

This much in your template should be enough to get the basic thing going, but it's not that presentable, so we will add a few more elements and try to make it more interactive. We are using bootstrap for styling, you are free to use a framework of your choice.

And there are a few more properties. Have a closer look at the template to understand them. Apart from the properties and methods on each item we also have methods that operate on the entire queue. For eg: uploadAll(), cancelAll(), removeAll().

Also, please note when we are uploading multiple files together, it does not send all files at once, instead the ng2-file-uploader calls the upload API multiple times depending on the number of items, uploading one at a time.

To start the application run the below command.

npm start

If you've followed along properly you should see the following screen on your browser running at localhost:3000.

Before Upload

Considering you have the Node.js app running, you should be able to upload files.

After Upload

Quick Setup

We know this has been a long tutorial and there are chances you might have slipped at one or two places. No worries, you can quickly get the demo running by following the below steps.

Conclusion

File Upload is one of the most common requirements for any web-application and sometimes it can become a hiccup, but not after this tutorial. In this tutorial, we learned how we can implement File Upload using Node.js and Angular 2 with ease.

Hi Rahil ,
is it necessary to have backend server ? I am with angular 4 and i don’t need to transfer the file to a remote back-end server . In my use case after i click on Upload button i want to parse the file data and if it’s has valid content then i want to save/store the file in my angular client server only.

Great tutorial. Was able to port to my c# API with no problems. My api saves the file to a folder and then adds a row to a db table with values associated with the file (path, filename, size, …). I’m trying to add a field to the form and send it with the file. I modified the html slightly hoping to be able to pick up the title and save it in the db. Is this possible?

Hi Sir
First Thank you for this awesome post, this really gave me a point to start.
But my issue is after I deployed the app to Heroku I can’t upload the files and I get 422 unprocessable entity error.
Do you have any Idea how to solve this?
PS: I did the same implementation as you did in this tuto.

Thanx for the great work, it really help alot.
Am having this weird problem, and ave seen fellow developers asking over the same, its good we have several modules to hundle uploading files, and yes they work fine, but there is no a single post or tutorial on how to add text fields along the file upload. lets say i want angular 2 blog i will obliviously want to add title, description, the body or main content and add an image to accompany the blog post. in my case using an uploader like ng2-file uploader then after the image is uploaded in a specified folder like say /uploads what next???? how do i save the image path along the text field for the blog post in say mongoDB so when i display the article for the world to see , everthing i typed appears including the image i uploaded..a good example is twitter, you choose an image and add some text and boom! it is retrieved with image and text u typed..i have used google stack overflow and even open source projects and seems no single help for doing so all i see is blogs with text fields only and no ways of including and serving images for the so called blogs….any help is greatly appreciated. Thank you..

Thanks Geniuso, in your efforts for posting this.
Yea a lot of people come up with this issue, and I answer them individually. I think it’s time that I implement this with an example and link it to this article.
So, as soon as I find some time I’ll add an example to my github and share it with you.

Also, since you mentioned MongoDB, if you are comfortable with storing images into the database, make sure to check out my other article on File Upload with Node.js and GridFS.