JSFiddle - React, Tailwind, and code Playground

by adil_invideo

HTML

<script src="https://unpkg.com/[email protected]/bundle/read-excel-file.min.js"></script>
<h3>Mask Preview Checker</h3>
<ul>
  <li>A small program that accepts a xls file(in a specified format) of all mask.</li>
  <li>Needs to have all the file names in the second column with its extension. for eg. "Square.svg"</li>
  <li>Currently the program reads the 12th Sheet from the xls where all the mask data are stored</li>
  <li>Makes fetch api to check if the mask exist in S3</li>
  <li>Fetch calls are made in batches which are adjustable</li>
  <li>Operation at each step is printed in the logs</li>
  <li>Failed missing urls are printed in the console log as well as the screen</li>
</ul>

<hr>

<input type="file" id="input" />

<div class="log-wrapper">
  <div class="log-title">
  Logs :
  </div>
  <div id="log">
  
  </div>
</div>

CSS

body{
  font-family: sans-serif;
}

.log-wrapper {
  padding: 5px;
  border: 1px solid #ccc;
  background: #fafafa;
  margin-top: 5px;
  max-height: 500px;
  overflow: scroll;
}

.log-title{
  font-size: 18px;
  font-weight: 600;
}

JavaScript

const s3Bucket = "https://s3.ap-south-1.amazonaws.com/invideo-block-assets/MASKS/SVG/"
const input = document.getElementById('input');

const batchCount = 20;	// number of fetch api calls to make at ones
const sheetNumber = 12; // the sheet number to read from the file
input.onchange = (event) => readFileContents(input.files[0]);

const readFileContents = (file) => {
  printLog('READING FILE. PLEASE WAIT...');
  readXlsxFile(file, {
    sheet: sheetNumber
  }).then((rows) => {
    rows.shift(); // removed the column headers
    const results = rows.map(row => {
      let data = row[1];
      let extension = data.substring(data.indexOf("."), data.length);
      let name = data.substring(0, data.indexOf("."));

      return `${name}_preview${extension}`;
    });
    const batches = createBatches(results);
    startFetchCallUsingBatches(batches)
  }).catch(err => printLog('ERROR IN READING FILE : ' + err));
}

const createBatches = (data) => {
  const result = [];
  let batch = [];
  data.forEach((item, index) => {
    if ((index + 1) % batchCount === 0) {
      batch.push(item);
      result.push([...batch])
      batch = [];
    } else {
      batch.push(item);
    }
  })
  if (batch.length > 0) {
    result.push([...batch])
  }
  return result;
}

const startFetchCallUsingBatches = (batches) => {
  printLog('TOTAL BATCHES - ' + batches.length);
  let currentBatch = 0;
  const successResult = [];
  const failedResult = [];

  let processResult = results => {
    results.forEach(it => {
      if (it.status === "rejected" ||
        it.value.status === 404 ||
        it.value.of === false) {
        failedResult.push(it.value.url);

      } else {
        successResult.push(it.value.url);
      }
    })
  }

  let makeCall = (batch) => {
    printLog('Started Batch --> ' + currentBatch);
    let promises = batch.map(it => fetch(`${s3Bucket}${it}`))
    Promise.allSettled(promises)
      .then(result => {
        processResult(result);
        ++currentBatch;
       ...