Creating Blob object from FileDropZone

App Building
1

Hello,

I want to create an app which will select/upload Excel file and create a CSV with selected columns and other conditions.

Initially I tried as follows:

const results = await fileUtils.parseXLSX(fileDropzone1.value[0]);

But the results object has some problems. It doesn't use workseet[0] ... to get the first worksheet. Rather it uses the worksheet name. Moreover it removes all blank lines, which I need for the calculation.

Due to this I used a JS library
https://unpkg.com/xlsx/dist/xlsx.full.min.js

Now to use this I need to use a FileReader object which needs a Blob object to be used. I wrote my code as follows:

  const excelFile = new Blob([fileDropzone1.value[0]],{type: "application/xls"});
  const fileReader = new FileReader();
  const fileName = "converted.csv"

  fileReader.onload = function (e) {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: "array" });
    const worksheet = workbook.Sheets[workbook.SheetNames[0]];
    const csvData = XLSX.utils.sheet_to_csv(worksheet);

    const link = document.createElement("a");
    link.href = "data:text/csv;charset=utf-8," + encodeURIComponent(csvData);
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

  };

  fileReader.readAsArrayBuffer(excelFile);

It creates and downloads a CSV file but it has junk values. I guess it's due to the fact that fileDropZone.value[0] uses Base64 encoded values. But I can't solve this problem.

Can anyone give me any tip to solve it?

Thanks and regards.

Sudip

1 Like
2

Hi there!

Thanks for reaching out!

I'm wondering if you can solve this by adding await to the fileUtils method & adding an option to include blank rows?

This appears to return the data for the first sheet, even if there are additional sheets:

1 Like