Processing blob data url

Question and Answers
1

Is there a way to process blob data url in appsmith?

Usage Explanation:
I have uploaded a .csv file which is > 5mb. This file is obviously uploaded as blob. Now I want to get the data to validate the column names.

Is there a way I can get the data from this blob data url?

2

Have you tried setting the Data Format property of the filepicker to CSV?

3

Hello @Abhishek_TUL, Currently Appsmith does not officially support this feature, but we have a possible workaround for you. However, it has the limitation that Appsmith will throw an error due to local storage limits.

const parseBlobUrl = async (url) => {
  const extract = (blobId) => {
    const url = `blob:${window.location.protocol}//${
      window.location.hostname
    }/${blobId.substring(5)}`;

    return url.split("?type=");
  };

  const readBlob = async (blobUrl) => {
    const [url, fileType] = extract(blobUrl);
    const file = await fetch(url).then((r) => r.blob());
    console.log("extract ", file);

    return await new Promise((resolve) => {
      const reader = new FileReader();
      if (fileType === "Base64") {
        reader.readAsDataURL(file);
      } else if (fileType === "Binary") {
        reader.readAsBinaryString(file);
      } else {
        reader.readAsText(file);
      }
      reader.onloadend = () => {
        resolve(reader.result);
      };
    });
  };
  const result = await readBlob(url);
  console.log("check ", result);
  // console.log("check ",content)
  storeValue("conent ", result);
};

We have updated our documentation regarding this issue, which you can track at this link: [Docs]: Improvise Warning message for Blob URL · Issue #993 · appsmithorg/appsmith-docs · GitHub

Additionally, we have opened a feature request to support this functionality in the future: [Feature]: Read plain CSV/txt files larger than 5mb · Issue #21411 · appsmithorg/appsmith · GitHub