How to upload files using Microservices

File uploads are commonly used in typical web based systems. Sometimes, when we provide an API Gateway we need to enable file uploads. We are using Express.js as the API Gateway implementation to support multipart/form-data upload.

Configuring the HTML form to allow attachments.

There are few methods to upload content to our server. We are going ahead with a HTML form object that support multiple file uploads.

How to upload files using HTML forms ?

A typical HTML form should be using the POST method when trying to upload the content. POSTing a form can be done with below options:

  • Send data in plain text (text/plain)
  • Send list of fields efficiently (application/x-www-form-urlencoded)
  • Submit a regular form (multipart/form-data)
  • Submit a form with files or attachments (multipart/form-data)

We are interested in uploading files hence we are configuring our HTML form type as : multipart/form-data.

The encType attribute is used to define how the form-data should be encoded when submitting it to the server (only for method=”post”)[1]

<form id='attachmentsForm' encType="multipart/form-data" action='http://localhost:8080/upload' method='post'>
  </form>

Below is the HTML file that allow users to upload files.

<!DOCTYPE html>
<html>

<body>
  <h2>HTML Multipart Form Data Upload.</h2>

  <form ref='uploadForm' id='uploadForm' action='http://localhost:8080/upload' method='post' encType="multipart/form-data">
    File 1:
    <input type="file" name="file_1" value="">
    <br/>
    File 2:
    <input type="file" name="file_2" value="">
    <br/><br/>
    <input type="submit" value="Upload">

  </form>
</body>

</html>

The action is set to the local server URI which will be up and running in your local machine.

Configuring the express.js server.

Our server is a regular node.js project that has express.js installed as a plugin. Below are steps including initiating the project and creating the server

1. Create a new folder in your wordspace.

2. Use the Terminal or CMD to navigate inside the location.

3.Configure the folder as a node project.

npm init

4. Create a file name : index.js and add the below content.

const express = require('express');
// Dependency to allow file uploads.
const fileUpload = require('express-fileupload');
// Dependency to allow CORS requests.
const cors = require('cors')


// Port number
const PORT = 8080;

// Upload location
const PATH = './uploaded_data';

// Initialise the express instance.

const app = express();

// Use Fileupload plugin with default options.
app.use(fileUpload());

// Allow Cross-Origin access to the service
app.use(cors());

// Optional : Serve Static Assets
app.use(express.static('public'));

app.listen(PORT, () => {
  console.log('Server up &amp; running on Port :', PORT);
})

// process the upload files
app.post('/upload', function (req, res) {

  if (!req.files || Object.keys(req.files).length === 0) {
    return res.status(500).send('missing file details.');
  }

  // Iterate through the list of files.

  let files = Object.keys(req.files);
  for (let index = 0, length = files.length; index < length; index++) {

    console.log(`Processing the file : ${files[index]}`);

    // Generate a random file name
    let newFileName = Math.floor(new Date() / 1000);

    // Saving the file to storage
    storeFiles(req.files[files[index]], newFileName);
  }

  res.status(200).send('file uploaded');
});

// Storing the file to storage.
storeFiles = function (sourceFile, newFileName) {

  return new Promise((resolve, reject) => {

    // Use the mv() method to store the file to the Harddrive.
    sourceFile.mv(`${PATH}/${newFileName}.png`, function (err) {
      if (err) {
        reject("error");
      } else {
        resolve("")
      }
    });

  });
}

4. Start the server.

node index.js

Provided there are no errors resorted,you have successfully started a Microservice that accepts uploads over REST endpoint.

Test the service using postMan:

Now the service is running in the local machine, we can simply test the upload functionality using postMan.

1. Start the postMan.

2. Create a new request where the method type is set to POST.

3. Add the below URI as the address.

http://localhost:8080/upload

4. Click on Body and select the form-data option.

5. Click on the Key and select ‘file‘ option which will enable a button to select the file you want to upload.

6. Select the file to upload and type in a dummy value as the key.

7. Click on Send to upload the file. Provided your upload is successful, you should see a message : ‘file uploaded’ and status 200 has received from the server.

PostMan Testing on File Upload

You can import the postMan script from the test folder found in the source-code.

Things to improve:
  • Customise the express to allow Cross-Origin access. (See the source code for an example)
  • Inserted of depending on a single promise to save the image, use an array of promises with the condition of all before submitting the response. (See the JavaScript Promises Explained for more details on Promises)
  • Allow express.js server to serve static html files, so you can navigate to http://localhost:8080/ and view the index.html file and use it to test the file upload service using JQuery AJAX call.
Download the Code.
Cite this article as: Guest Contributor, "How to upload files using Microservices," in Cyber Memos, January 28, 2020, https://cybermemos.com/developent/javascripts/how-to-upload-files-using-nodejsmicroservices/.

3 Replies to “How to upload files using Microservices”

  1. best cbd oil

    It is really a great and helpful piece of
    information. I am happy that you simply shared this useful info
    with us. Please keep us informed like this.
    Thank you for sharing.

  2. Owen

    Hello there! This article couldn’t be written any better! Looking through this article reminds me of
    my previous roommate! He constantly kept talking about this.

    I most certainly will send this article to him. Pretty sure he’ll
    have a great read. Thanks for sharing!

Comments are closed.