Legacy JavaScript Uploader (Deprecated)

This page documents the legacy MASV JavaScript Uploader for reference only. All new development should use the Web Uploader SDK.

Getting Started

Include the uploader library in your page:

<script src="https://dl.massive.io/masv-uploader.js"></script>

Create a new instance and pass the required parameters:

const uploader = new MASV.Uploader(
  packageID,
  packageToken,
  apiURL,
);

Where:

packageID — the ID of the Package to upload files to. Obtain this by creating a Portal Package or a team Package.
packageToken — the authorized JWT token for the Package, also obtained at creation time.
apiURL — the base URL of the MASV API (https://api.massive.app for production).

Usage

Initialization

After instantiating the uploader, set up a listener to handle upload event callbacks:

uploader.setListener(listener);

The listener interface (in TypeScript):

interface MasvListener {
  onProgress: (completed: number, total: number, speed: {
    instant: number;
    average: number;
    moving: number;
  }) => void;
  onFileComplete: (file: MasvFile) => void;
  onRetry: (reason: Error) => void;
  onComplete: () => void;
  onError: (err: Error) => void;
}

Callback descriptions:

onProgress — called as bytes are uploaded. Reports completed bytes, total byte size, and a speed object with instant, average, and moving speeds (all in bits per second). instant is the speed since the last callback, average is the rolling average since upload start, and moving is the moving average over the last 30 seconds.
onFileComplete — called when a single file finishes uploading.
onRetry — called when the uploader retries a request due to a retriable error (network error, 5xx server error).
onComplete — called when the upload is complete and the Package has been finalized.
onError — called when an unrecoverable error occurs and the upload halts (e.g., a 401 server error).

Uploading Files

Pass the list of files to upload:

uploader.upload(files: MasvFile[]);

Each MasvFile object must conform to:

interface MasvFile {
  id: string;
  file: File; // Standard browser File object
  path: string;
}

Cancelling

Cancel an active upload by calling:

uploader.terminate();

Code Example

The following example demonstrates a Portal upload. You can view a fully working page hosted here.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://dl.massive.io/masv-uploader.js"></script>
  <title>Simple MASV Uploader</title>
  <style>
    code {
      background-color: #f1f1f1;
      font-size: 105%;
    }
    div {
      margin: 10px;
    }
  </style>
</head>
<body>
  <h2>MASV Uploader Test Page</h2>
  <input id="fileupload" type="file" multiple />
  <button type="button" onclick="startUpload()">Upload</button>
  <div>
    <code readonly id="status"></code>
  </div>
  <script>
    async function fetchPortalID(subdomain) {
      const resp = await fetch(
        `https://api.massive.app/v1/subdomains/portals/${subdomain}`
      );
      const data = await resp.json();
      return data.id;
    }

    async function createPackage(portalID, senderEmail, packageName = "Web uploader test", packageDescription = "") {
      const headers = { "Content-Type": "application/json" };
      const body = {
        sender: senderEmail,
        name: packageName,
        description: packageDescription,
      };

      const resp = await fetch(
        `https://api.massive.app/v1/portals/${portalID}/packages`,
        {
          method: "POST",
          headers: headers,
          body: JSON.stringify(body),
        }
      );

      const data = await resp.json();
      return {
        packageID: data.id,
        packageToken: data.access_token,
      };
    }

    async function startUpload() {
      const portalID = await fetchPortalID("js-uploader-test");
      const { packageID, packageToken } = await createPackage(portalID, "test@masv.io");

      window.onbeforeunload = function (e) {
        e.preventDefault();
        e.returnValue = "Your upload will be interrupted";
      };

      const fileList = document.getElementById("fileupload").files;
      const filesArray = [];
      for (let i = 0; i < fileList.length; i++) {
        filesArray.push({
          file: fileList[i],
          path: "",
          id: i,
        });
      }

      const statusEl = document.getElementById("status");
      statusEl.innerHTML = "Started";

      const uploader = new MASV.Uploader(
        packageID,
        packageToken,
        "https://api.massive.app"
      );

      const listener = {
        onComplete: () => {
          window.onbeforeunload = null;
          statusEl.innerHTML = "Completed";
        },
        onError: (e) => {
          console.log("Unrecoverable upload error", e);
          window.onbeforeunload = null;
        },
        onFileComplete: (f) => {
          console.log("File upload completed:", f.file.name);
        },
        onProgress: (transferred, total, speedStat) => {
          const progress = Math.floor((transferred / total) * 100);
          statusEl.innerHTML = `Upload progress: ${progress}%`;
        },
        onRetry: (e) => {
          console.log("Retrying because:", e);
        },
      };

      uploader.setListener(listener);
      uploader.upload(...filesArray);
    }
  </script>
</body>
</html>