JAVASCRIPT

Handling File Uploads Using AngularJs, Node and Express


I was working on a project recently and there was a need to incorporate file uploads into the application. I stumbled on this awesome directive by Danial Farid that seemed so easy to use even though nothing is exactly as easy as it seems. I tried incorporating it into my application and it was a struggle for a while before finally getting a hang of it.

Let me walk you through the steps I took in handling the little challenge:

Install the File Upload Directive

Make sure you reference the necessary files in your HTML file like so:

Note that the bower_components folder could also be vendor..it’s totally dependent on where you configured bower to install your frontend components.

The contents in your body tag,….still in the HTML file:

Inject Angular file upload directives and services

In your app.js file inject angularFileupload like so:

Then within your Controller inject the angularfileupload service as a dependency in the controller.

 

Notice the commented part within the above code( //node.js route), this part states the backend route where the file should be uploaded to. In order to do this, you need a node module that handles multipart files from angular to node such as Multer so you have access to the file at the backend. To do this:

First, install multer

Next, require multer in the server.js where your express app configurations exist for your server connection.

Note: it could be app.js or whatever your name you’ve given it.

This above block of code stores the file uploaded in a folder called uploads as specified but if you want to save memory space on your device and keep the uploaded file safe, it is best to store it in the CLOUD! This could be done using any cloud service. I employed the services of CLOUDINARY to execute this in my application.

Cloudinary is a cloud service that allows easy upload of images to the cloud. It provides url and http based APIs that can easily be integrated with any web development framework.

To upload the file to cloudinary, sign up at cloudinary.com to get your cloud name and url.

Then, install cloudinary

Copy your cloud url into your .env file like so:

CLOUDINARY_URL=cloudinary://564621636376494:PoVLL5eiWENNIsVZx_A48UWdkYc@comedian

where 564621636376494 is your API KEY, PiVKI2eiWENNIsVZx_A48UWdkYc is the API SECRET and cloud name is comedian.

Require cloudinary in your nodeJS controller.

Cloudinary requires the file path in order to upload the local file to cloud. Multer enables you get the path of the file parsed from angular in the req.files, hence the use of “req.files.file” within the if block.

And just like that, you can now use the url gotten from cloudinary’s upload callback function which is result.url wherever you need it to be used.

This is just one of the many ways of handling file uploads and storing files in the cloud using angularjs and node express api.

If there’s something you are unclear about, kindly drop your comments in the section below.

I hope it helps. :)