Custom Multi-Part File Uploader

import "./styles.css";
import * as filestack from "filestack-js";

//Replace Your_API_key with you API Key from DevPortal dev.filestack.com/login/
const client = filestack.init("Your_API_key");

const onProgress = (evt) => {
  document.getElementById("progress").innerHTML = `${evt.totalPercent}%`;
};

document.getElementById("file").addEventListener("change", (event) => {
  const files = event.target.files[0];

  const UploadOptions = {
    concurrency: 5, //Maximum amount of part jobs to run concurrently. Default is 3.
    disableIntegrityCheck: true, //Disable checking integrity of uploaded files. On slower devices it can boost upload performance (disable counting md5 from file parts)
    intelligent: false, //Enable/disable intelligent ingestion. If truthy then intelligent ingestion must be enabled in your Filestack application. Passing true/false toggles the global intelligent flow (all parts are chunked and committed). Passing 'fallback' will only use FII when network conditions may require it (only failing parts will be chunked).
    intelligentChunkSize: 5 * 1024 * 1024, // Set the default intiial chunk size for Intelligent Ingestion. Defaults to 8MB on desktop and 1MB on mobile.

    partSize: 6 * 1024 * 1024, //Maximum size for file slices. Is overridden when intelligent=true. Default is (6MB).
    progressInterval: 10000, //How often to report progress. Default is 1000 (in milliseconds).
    onProgress,
    onRetry: () => {
      console.log("Retry uploading");
    },
    retry: 3, // Retry limit. Default is 10.
    retryFactor: 2, //Factor for exponential backoff on server errors. Default is 2.
    retryMaxTime: 15000, //Upper bound for exponential backoff. Default is 15000.
    timeout: 200000, //Timeout for network requests. Default is 120000.
    tags: {
      tagWord: "Tag Word",
    },
  };

  const StoreUploadOptions = {
    altText: " Alternative keyword",
    filename: "This-is-the-name-of-the-file",
    //mimetype,
    //sanitizer: SanitizeOptions;
    //workflows: (string | WorkflowConfig)[];
  };

  const token = {};

  client
    .upload(files, UploadOptions, StoreUploadOptions, token)
    .then((res) => {
      console.log("success: ", res);
    })
    .catch((err) => {
      console.log(err);
    });

  document.getElementById("cancel").addEventListener("click", () => {
    token.cancel();
    document.getElementById(
      "progress"
    ).innerHTML = `File upload has been canceled`;
  });

});

Copied!