{ // create file input elements for the two files const fileInput1 = html``; const fileInput2 = html``; // create empty HTML tables for the two files const table1 = html`

`; const table2 = table1.cloneNode(true); // function to handle file load event and display stats in table const handleFileLoad = (table) => async (event) => { const file = event.target.files[0]; const reader = new FileReader(); // read the file contents as text reader.readAsText(file); // create a promise to wait for the file to load and parse const fileLoaded = new Promise((resolve, reject) => { reader.onload = () => { const contents = reader.result; const lines = contents.trim().split("\n"); const headers = lines[0].split(","); const numColumns = headers.length; const numRows = lines.length - 1; // create a row for the number of rows const numRowsRow = html` Number of rows: ${numRows} `; // create a row for the number of columns const numColsRow = html` Number of columns: ${numColumns} `; // create a row for the column names const headerRow = html` Column names: ${headers.map((h, i) => `${i}: ${h}`).join(", ")} `; // add the rows to the table body const tableBody = html` ${numRowsRow}${numColsRow}${headerRow} `; table.replaceChild(tableBody, table.lastChild); // resolve the promise with the parsed data resolve({ numRows, numColumns, headers }); }; reader.onerror = () => { reject(reader.error); }; }); // wait for the promise to resolve before displaying the results in the table try { const { numRows, numColumns, headers } = await fileLoaded; console.log( `File loaded: ${file.name}, Rows: ${numRows}, Columns: ${numColumns}, Headers: ${headers}` ); } catch (err) { console.error(err); } }; // add event listeners to the file input elements fileInput1.addEventListener("change", handleFileLoad(table1)); fileInput2.addEventListener("change", handleFileLoad(table2)); // display the file input and table elements in the notebook return html`${fileInput1} ${table1} ${fileInput2} ${table2}`; }