Custom Monitor File Upload

Introduction

With the help of Catchpoint’s Custom Monitor, you can measure the performance of uploading files such as images, audios, videos, and documents. Inthis article, we will be discussing two methods of file upload. The first uses HTTP multipart upload while the other uses the Chromium headless browser.

An HTTP multipart request is a HTTP request that clients construct to send files and data to an HTTP server. Multipart upload allows you to upload a single object as a set of parts. Each part is a contiguous portion of the object's data. You can upload these object parts independently and in any order.

A headless browser is a web browser without a graphical user interface. It provides automated control of a web page in an environment similar to popular web browsers, but all actions are executed via a command-line interface or using network communication. Headless browsers are typically used to test web pages. This is because they can easily understand the HTML pages in the same manner as any other browser, including style elements such as color, layout, fonts, JavaScript, and Ajax execution.

Learn more about Custom Monitor by reading this article.

Prerequisites

• NodeJS installed on your Linux Agent
• File(s) to be uploaded
• HTTP endpoint where the file needs to be uploaded

Method 1: Multipart Upload using NodeJS

Installation and Configuration

1. To begin the Custom Monitor, log in to your Linux node and navigate to this directory:
    /opt/3genlabs/hawk/syntheticnode/service/shellmonitor/sandbox
   2. Install the required Node JS libraries by running the following commands:
   $ npm install request
$ npm install fs
2. Place the file to be uploaded in the same directory.

Implementation

Write the Custom Script

1. Navigate to /opt/3genlabs/hawk/syntheticnode/service/shellmonitor/sandbox to create a JavaScript file:
   $ vi upload.js
2. Paste the code given below and save it:

#!/usr/bin/env node
 
var fs= require('fs');
var request = require('request');

var url = process.env.CP_UNSAFE_VAR_URL;
var upfile = '/opt/3genlabs/hawk/syntheticnode/service/shellmonitor/sandbox/'+process.env.CP_UNSAFE_VAR_fileName;

fs.readFile(upfile, function(err, content){
 if(err){
     console.error(err);
   }

 var boundary = "xxxxxxxxxx";
 var data = "--" + boundary + "\r\nContent-Disposition: form-data; name=\"file\"; filename=\"" + upfile + "\"\r\nContent-Type:application/octet-stream\r\n\r\n"; 
 var payload = Buffer.concat([
               Buffer.from(data, "utf8"),
               new Buffer(content, 'binary'),
               Buffer.from("\r\n--" + boundary + "\r\n", "utf8"),
               ]); 
 
 var options = {
                method: 'post',
                url: url,
                headers: {"Content-Type": "multipart/form-data; boundary=" + boundary},
                body: payload,
               };
 console.log("Started Uploading.....")
 var start_time= Math.round((new Date()).getTime());
 request(options, function(error, response, body) {
         console.log(body);
         var end_time= Math.round((new Date()).getTime());
         var time_diff=end_time-start_time;
         console.log("''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''");
         console.log("Time to upload: "+time_diff+"ms");
       });
});

Note: You can modify the above code as per your requirement

**Create the Custom Test **

1. Create a Custom Test within the Portal with the JSON template given below.  Make sure that you replace the necessary values.

 {
"shell_command_file_name": "#Script_Name#",
"fileName": "#File_Name#",
"URL": "#URL#"
}

Method 2: Upload Using Headless Chromium with Puppeteer

Installation and Configuration

1. Log in to your Linux node, and navigate to the directory: /opt/3genlabs/hawk/syntheticnode/service/shellmonitor/sandbox
2. Install puppeteer on your node using the below command:
   $ npm i puppeteer
3. Place the file to be uploaded in the same folder.

Implementation

1.Navigate to /opt/3genlabs/hawk/syntheticnode/service/shellmonitor/sandbox to create a JavaScript file:
$ vi upload.js
2. Copy and paste the code given below and save the file.

#!/usr/bin/env node

const puppeteer = require('puppeteer');
(async() => {

const browser = await puppeteer.launch({args: ['--no-sandbox']});
const page = await browser.newPage();

await page.goto('https://uploadfiles.io/');
await page.waitForSelector('#upload-window', { timeout: 4000 });

const fileEle = await page.$('input[type="file"]');
await fileEle.uploadFile('/opt/3genlabs/hawk/syntheticnode/service/shellmonitor/sandbox/'+process.env.CP_UNSAFE_VAR_file_name);
await page.waitFor(5000);

const performanceTiming = await page.evaluate(() => window.performance.getEntriesByType('resource').filter(function (w) {return(w.name=='https://up.uploadfiles.io/upload')})[1].duration);
console.log("Time to upload: "+performanceTiming);

browser.close();
})();

Results

You can set up Indicators to capture the data.

Apply this Indicator to your Custom Test to analyze the data in the Portal.