Digital Asset Management

  
Upload your files here

  

   Upload
  

  

    
    


      

      

      

       Close
      

    

  

import * as filestack from "filestack-js";
window.addEventListener("DOMContentLoaded", function () {
  let newRow, uploadedFiles;
  
  //Replace Your_API_key with you API Key from DevPortal dev.filestack.com/login/
  const apikey = "Your_API_key";
  
  //Replace Your_POLICY_CODE with a real Policy created from your DevPortal dev.filestack.com/login/
  const p = "Your_POLICY_CODE";
  
  //Replace Your_SIGNATURE_CODE with a real SIGNATURE created from your DevPortal dev.filestack.com/login/
  const s = "Your_SIGNATURE_CODE";
  
  const security = {
    policy: p,
    signature: s
  };
  
  //File Picker configuration
  const pickerOptions = {
    maxFiles: 5,
    maxSize: 10 * 1024 * 1024,
    uploadInBackground: false,
    onUploadDone: (res) => {
      uploadedFiles = res.filesUploaded;
      for (var i = 0; i < uploadedFiles.length; i++) {
        const file = uploadedFiles[i];
        //HTML of the new row
        newRow = `
                  ${file.filename} 		
                  ${file.mimetype} 	
                      
                      

                  




                      

                      
                  `;
        //append the new row to the table
        document
          .getElementById("assets-table")
          .insertAdjacentHTML("beforeend", newRow);
        
      }
    }
  };

  const client = filestack.init(apikey);

  //Open the File Picker
  document.getElementById("picker").addEventListener("click", function (e) {
    e.preventDefault();
    client.picker(pickerOptions).open();
    return false;
  });

  //Close the preview popup
  document.getElementById("close-view").addEventListener("click", function (e)   {
    e.preventDefault();
    document.getElementById("view-popup").style.display = "none";
    document.getElementById("file-preview").innerHTML = "";
    return false;
  });
  
  document.getElementById("assets-table").addEventListener("click", (event) =>   {
    
    // Check if an SVG icon was clicked

    const svgAncestor = event.target.closest("svg");

    if (svgAncestor) {
      
      const svgId = svgAncestor.id;
      const parentTr = event.target.closest("tr");

      if (parentTr) {
        //get the asset handle
        let handle = parentTr.dataset.handle;

        if (svgId === "remove-asset") {
          client
            .remove(handle, security)
            .then((res) => {
              //Remove the entire table row when asser is removed
              parentTr.remove();
            })
            .catch((err) => {
              console.log(err);
            });
          
        } else if (svgId === "preview-asset") {
          
          // Display files in Filestack document viewer
          client.preview(handle, { id: "file-preview" });
          
          // Show the popup
          document.getElementById("view-popup").style.display = "block";
          
        } else if (svgId === "download-asset") {
          //Download asset
          client
            .download(handle, security)
            .then((res) => {
              const blob = res.data;
              const filename = res.headers["x-file-name"] || "downloaded-file.txt";
              downloadBlob(blob, filename);
            })
            .catch((err) => {
              console.log(err);
            });
        }
      }
    }

    function downloadBlob(blob, filename) {
      // Create a URL for the blob.
      const url = URL.createObjectURL(blob);

      // Create a temporary anchor element.
      const link = document.createElement("a");
      link.href = url;

      // Set the download attribute with the desired filename.
      link.download = filename;

      // Append the link to the document body (optional but good practice).
      document.body.appendChild(link);

      // Programmatically click the link to start the download.
      link.click();

      // Clean up by revoking the blob URL and removing the link.
      
      setTimeout(() => {
        URL.revokeObjectURL(url);
        document.body.removeChild(link);
      }, 800);
    }
  });
  
});