Upload file along with other input fields – Node JS

by Posted on

So we are going to teach you how you can upload the file from HTML form along with other input fields in Node JS. We will be using NPM’s formidable, fs (file system) and EJS modules. We will create an input type file to select a file from computer and input type text, the file will be store in server with the name I enter in text box.

Let’s get started

Open command prompt in your project’s root folder and run the following command to install necessary modules:

npm install express http formidable fs ejs
  • Express and HTTP will be used to start the server
  • formidable will be used to handle the input file
  • fs (file system) will be used to save the file
  • EJS will be used to render the HTML page

Now create a file named index.js and paste the following code in it:

var express = require("express");
var app = express();
var http = require("http").createServer(app);
var formidable = require("formidable");
var fs = require("fs");

app.set("view engine", "ejs");

http.listen(4000, function () {
	app.get("/", function (request, result) {
		result.render("index");
	});
});

It will start the server at port number 4000 and creates a default route which when access will render the index.ejs page. We will create that file in a moment. We are setting the default template engine to EJS, don’t worry if you are using any other engine, the core login will remain the same.

Start the server

To start the server, simply run the following command in your command prompt which should be opened in your project’s root folder:

npm install -g nodemon
nodemon index.js

Now you can access your server by running the following URL in your browser:
http://localhost:4000/

Display input type file

Now create a folder in your project named “views”. Your all HTML files should be placed inside this folder and all files must end with an extension .ejs. Create a file named index.ejs inside this views folder. The name of the file must be the same as in render function above, along with .ejs extension at the end. Paste the following code in that file. It will create a form with an input field to select a file and an input field to enter text. We will save the uploaded file with the name entered in text box.

<form method="POST" action="/upload" enctype="multipart/form-data">
	<input type="file" name="file">
	<input type="text" name="fileName" placeholder="File name">

	<input type="submit">
</form>

Save file on server

Make sure the method is POST and encoding type must be attached, otherwise, the file will not be sent. Action attribute will specify the route where data should be sent. So paste the following code in your index.js file right below the “/” route:

app.post("/upload", function (request, result) {
	var formData = new formidable.IncomingForm();
	formData.parse(request, function (error, fields, files) {
		var extension = files.file.name.substr(files.file.name.lastIndexOf("."));
		var newPath = "uploads/" + fields.fileName + extension;
		fs.rename(files.file.path, newPath, function (errorRename) {
			result.send("File saved = " + newPath);
		});
	});
});

Now you just need to create a folder named “uploads” and when you select the file. Enter the name, the file will be saved with the name you enter in the text field. That’s how you can upload a file on Node JS server.

[wpdm_package id=’245′]

Published by adnanafzal565