Quite a common task in web design will be allowing users to upload files to a server and then display the uploaded file back on the website. There are many ways of accomplishing this task, however using Node.js is one of the easiest ways to do this. With Emma, a Year 2 Graphic Communication student at my university, we are creating a website a little like Instagram called ‘Inspix’. I first mentioned the project in the January 8-12th 2018 Reflective Journal so read that article to find out the background behind the project, but basically Emma has been learning code for a little while now and wants an interesting project to put in her portfolio amongst the work she creates for her Graphic Communication degree. I felt it would be good to collaborate with a student on another course using our skillsets to create an interesting product, so I agreed to help her with this.

What is ‘Node.js’ and how is it set up?

Node.js is a free and open source server framework. You install this framework onto a Windows, Linux or Mac workstation or a server and using asynchronous programming, Node.js can perform operations such as handling file transfers to and from servers and then then display this content on a webpage. Perfect for what Emma and I want to do! in addition to allowing users to upload files to a server and view the files on a webpage, Node.js can also:

• Create dynamic content on websites.
• Create, open, read and write files on a server.
• Collect data from forms.
• Add, delete or modify data in databases.

It’s an all-round very handy framework to use for server-side operations.

Setting up a Node.js server

 

As mentioned before, Node.js is free and can be installed on a server or a workstation computer – simply run the executable file to install it.

For the web app Emma and I are creating, I used an old HP ProLiant ML310 G6 server built in 2011 to host our website. The server is old and used to be our family server, but has been redundant for several years now. This particular server is quite a low-end one with a basic quad-core Intel Xeon X3430 CPU and only 16GB of RAM, however these specifications are absolutely fine for hosting a basic website like ours. The server has Windows Server 2012 R2 Standard installed on it. Without going into too much detail, it is possible to run ‘virtual servers’ in modern versions of Windows Server. The benefits of having a virtual server are:

• It can easily be copied to another server and run on that.
• It can easily be backed up.
• If you back it up regularly, you can easily restore lost data if you accidentally lose data on your server.
• The performance is often better since the virtual server tends to be doing specific tasks (e.g., instead of having the host server sorting email, internet access, printers and file shares you might set up a specific virtual server for each).
• When you are finished using the server you can simply delete it without having to uninstall software or reconfigure the operating system to remove certain capabilities.

All of the benefits of using a virtual server are related to backup, data redundancy and time-saving.

Microsoft Hyper-V is a piece of software included in modern versions of Windows Server, such as 2012 R2 which is installed on our server. Hyper-V allows the user to create virtual servers. I created a virtual server in Hyper-V and installed Windows Server 2016 Standard in it. Once Windows had installed onto the virtual server, I downloaded Node.js and installed it on the server. The virtual server has an IP address, just like a physical server does, so by changing the IP type from dynamic to static (meaning the IP address doesn’t change every time the operating system boots), the virtual server will host the website, accessible by typing the IP address of the sever into the address bar on a web browser.

 

After this, it was time to write the code.

Writing the code

Most of the code is JavaScript with a tiny bit of HTML which puts an image and a couple of buttons on the website. The JavaScript code is as follows:

• Lines 1-4 import several modules that are required for the code to run: ‘express’, ‘express-fileupload’ and ‘cors’. ‘Express’ is a robust framework that allows for Node to do those things I listed earlier (communicate with servers, send and receive forms etc). ‘Fileupload’ allows for Node to be able to communicate with the sever and ‘Cors’ is a ‘middleware’ that allows Node.js to connect with the server.
• Line 6 defines a new variable called ‘latestImage’ which is empty by default. Later, this contains the file path of the latest image to display.
• Line 7 defines a new variable called ‘imgDir’ which contains the file path of the folder on the server where the files that users upload are to be stored. I made a folder on the C:\ drive called ‘inspix’ which contains all the website files, then inside this directory a directory called ‘uploads’ which contains the files uploaded by users.
• Lines 9 and 10 instruct the program to use the ‘cors’ and ‘fileupload’ libraries which were imported earlier.
• Lines 12-14 link the JavaScript file to the HTML file which will be displayed when the user navigates to the website.
• Lines 16-18 are commented out, but will be used to link to the CSS stylesheet which at this time has not been written yet.
• Lines 20-32 send the file the user selected to the sever, specifically:
  • Lines 21 and 22 check to see if a file has been selected, if one hasn’t been selected an error is shown which says ‘No files were uploaded’.
  • Line 24 defines a new variable called ‘uploadedFile’ which is defined as the file that the user has selected to upload.
  • Line 25 changes the contents of the ‘latestImage’ variable to the file path of the latest image that has been uploaded to the server.
  • Line 26 moves the uploaded file (which by default is stored in a temporary location) to the file path stored in the variable ‘imgDir’ (C:\inspix\uploads) and renames the file to the original file name.
  • Lines 27-30 check for an any errors in the actions executed on lines 24, 25 and 26 and if there are errors an exception is thrown, else the code moves on.
• Lines 34-36 display the latest image in a div defined in HTML.
• Lines 39-40 define the port to open (this has to be opened and forwarded on the router before this work) and sends a message to the Command Prompt console which says ‘Listening on port 3000’.

That’s the JavaScript – relatively straight-forward but doesn’t look like conventional JavaScript. Happily, this code can run on the server to just deal with the uploading and displaying of images. Code to display JavaScript content on the website such as animations and button functions can be written in a separate JavaScript document and linked to the HTML, of course.

Here’s the HTML:

At this point in time, very basic. Inspix is really a ‘proof of concept’ at the time of writing, basically meaning all this project does at the moment is prove that we are able to upload files to a server and then view them back on the website, hence for a lack of front-end development but a fair amount of back-end development.

• Line 3 is the page title, Inspix.
• Line 4 links to the favicon image to display in the tab next to the page title.
• Lines 7-10 are an HTML form, which contains:
  • A button with ‘Choose File’ written in it, defined on Line 8 (‘input type=”file” automatically creates a button like this in HTML forms).
  • A button with ‘Submit’ written in it, defined on Line 9.
• Line 11 is simply an image tag with the source set to the address path of the latest file uploaded to the server.

Starting the Node.js server

Before the server can be started, those libraries that were imported at the beginning of the JavaScript file need to be installed into the directory that the JavaScript file is being run in. If you don’t install those libraries, the code won’t work properly since it won’t be able to find those required libraries.

Libraries are installed using the Command Prompt in Windows. To make the code for Inspix work, the following commands need to be executed in Command Prompt:

C:\Users\Administrator>cd C:\inspix

This changes the working directory to the ‘inspix’ folder in which the JavaScript file is stored.

C:\inspix>npm install express

C:\inspix>npm install express-fileupload

C:\inspix>npm install cors

Once each of these commands has been executed, the required libraries have been installed.

By default, if the server is running and the JavaScript file is changed, the server needs to be restarted before the changes take effect. In order to bypass this, a module called nodemon can be installed which will allow the JavaScript file to be modified whilst the server is running and the changes take effect without restarting the server. To install nodemon into the ‘inspix’ folder:

C:\inspix>npm install nodemon

At the moment, the Node.js server is not running, so the site won’t work at all. To start the server, the command to run in this case is:

C:\inspix>nodemon index.js

Where ‘index.js’ is the name of the JavaScript file.

Accessing the website

Suppose the static IP address of the physical (or virtual, in this case) server that the files are saved on is 100.20.3.2 and the open port on the server is port 3000 (like defined on line 39 of the JavaScript file) – the user will type 100.200.3.2:3000 into the address bar of the browser to access the website.

If the Node.js server isn’t running (i.e. ‘nodemon index.js’ hasn’t been executed in Command Prompt), the website will not be accessible.

Demonstration of the website

Watch the video below to see the website in operation and a real-time demonstration of how files that the user uploads are being stored in the ‘uploads’ directory on the server.

The website allows the user to upload an image, which is saved on the server, and view it on the webpage straight after it has been uploaded.

Next steps

There’s a lot left to do, including:

• Writing CSS to make the interface much more attractive.
• Possibly showing all images on the server in the webpage.
• Possibly allowing the user to also upload a description with the photo to display beneath the photo.
• Possibly allow the uploading of multiple files.

This is a good start to the project though and as a proof of concept, it works perfectly!

Bibliography

W3schools.com. (2018). Node.js Introduction. [online] Available at: https://www.w3schools.com/nodejs/nodejs_intro.asp [Accessed 15 Jan. 2018].