Learn to Build How to Upload Multiple Files Using NodeJS

1
5205
upload-multiple-files

In this article, we are going to build an application that is used to upload multiple files or images. We are also going to used Nodejs, Expressjs and basic syntax of html to design our front page as well as if you uploaded multiple files it will be saved in your project folder. In this project, we are also going to use Multer.

Steps for Installation:
For developing this app, we need NodeJS, ExpressJS and Multer.
Firstly, we are going to install Nodejs. To download the setup file, you have to visit the following link:
https://nodejs.org/en/. Open this link, download the setup according to your Operating System, and install it.

Once you are done with the installation, open command prompt as Run as administrator and type the following command to check your Node version.
command-prompt
Secondly, we are going to install Expressjs. To install it, click on the following link http://expressjs.com/. Once the page is open.click on Getting Started, and then on Installation. You will be able to see some steps listed on the page http://expressjs.com/en/starter/installing.html. Follow the steps and complete the installation of ExpressJS.

Now, it time to start with our actual project. We are going to create a project using expressjs. I named my folder as uploading.
express-uploading
Open your created application folder and find the Package.json file. Open the file and make sure that it looks like this, if not then add this code in your package.json file.
package-json
Once, you are done with the json, run the following command:
npm-install
After the successful installation of NPM, we are going to run our project. There are two commands that we can run:
node-app
And
npm-start
You can use one of these commands to run your project. Once you fire the command, go to your browser and type localhost:3000 you will get the following output:
express

Steps for Implementation:
Now, are going to design our front page using HTML, for this we will need to create the index.ejs file in our view folder and add the following code:

Now, we are going to add a function to our app.js file. It will prompt you with a message if your application doesn’t have any errors. After that, you have to change the jade file to ejs. I’ve made the changes bold, so your app.js file look like this:

Now, we need to addl Multer. Refer the following link https://github.com/expressjs/multer. Open this link and run the following command in your command prompt.
save-multer
You will also need to add the following code in your routes->index.js file.

Once you added the code, you have to create uploads folder in public folder.
upload
Now, we have to save the images/files in the uploads folder. For this add the following code in your index.js so it looks like:

After adding the code, just restart your app using node app/npm start command. You will get the following output in command prompt:
app-npm
Now go to your browser, you will get the following output:
browser
When you save your images or documents, it will save the names like:
images-or-documents
Once you click on submit, you will get the detailed information about the uploaded file. I’ve attached the output:
uploaded-file
Now, you can see the uploaded file in uploads folder like:
upload-folder

I hope this has been helpful for you guys in understanding a how to upload multiple images/files using Node.JS.

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here