change write function to load a file

Author: Or-Mi

src/taskpane/components/App.tsx

@@ -355,12 +355,6 @@ const App = () => {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
 
-      // // Handle compressed response
-      // const responseBuffer = await response.arrayBuffer();
-      // const responseUint8Array = new Uint8Array(responseBuffer);
-      // const responseString = responseUint8Array.toString();
-      // // const decompressedResponse = pako.ungzip(responseUint8Array, { to: 'string' });
-
       // return JSON.parse(responseString);
       return await response.json();
     } catch (error) {
@@ -375,64 +369,6 @@ const App = () => {
     }
   };
 
-//   const convertTo2DArray = async function (cellDict) {
-//   // Helper function to parse row and column from address (e.g., "Summary!A3" -> row 3, col A)
-//   function parseAddress(address) {
-//     const match = address.match(/!([A-Z]+)(\d+)/);
-//     if (!match) return { row: 0, col: 0 };
-//     const colLetter = match[1];
-//     const row = parseInt(match[2], 10) - 1; // Convert to 0-based index
-//     // Convert column letter to 0-based index (A=0, B=1, etc.)
-//     let col = 0;
-//     for (let i = 0; i < colLetter.length; i++) {
-//       col = col * 26 + (colLetter.charCodeAt(i) - 65 + 1);
-//     }
-//     return { row, col: col - 1 }; // Adjust to 0-based
-//   }
-
-//   // Find maximum row and column indices
-//   let maxRow = 0;
-//   let maxCol = 0;
-//   for (const cell of Object.values(cellDict)) {
-//     const { row, col } = parseAddress(cell.address);
-//     maxRow = Math.max(maxRow, row);
-//     maxCol = Math.max(maxCol, col);
-//   }
-
-//   // Initialize three 2D arrays
-//   const properties = Array(maxRow + 1).fill().map(() => Array(maxCol + 1).fill(undefined));
-//   const formulas = Array(maxRow + 1).fill().map(() => Array(maxCol + 1).fill(undefined));
-//   const numberFormats = Array(maxRow + 1).fill().map(() => Array(maxCol + 1).fill(undefined));
-
-//   // Populate the arrays
-//   for (const cell of Object.values(cellDict)) {
-//     const { row, col } = parseAddress(cell.address);
-//     // Properties array
-//     properties[row][col] = {
-//       format: {
-//         fill: {
-//           color: cell.format.backgroundColor
-//         },
-//         font: {
-//           bold: cell.format.font.bold,
-//           color: cell.format.font.color,
-//           italic: cell.format.font.italic,
-//           name: cell.format.font.name,
-//           size: cell.format.font.size,
-//           strikethrough: cell.format.font.strikethrough || false, // Default to false if undefined
-//           underline: cell.format.font.underline
-//         }
-//       }
-//     };
-//     // Formulas array
-//     formulas[row][col] = cell.formulaR1C1;
-//     // Number formats array
-//     numberFormats[row][col] = cell.format.numberFormat;
-//   }
-
-//   return { properties, formulas, numberFormats };
-// }
-
 function parseExcelJsonTo2DArrays(jsonData) {
   // Find the maximum row and column indices
   let maxRow = 0;
@@ -537,7 +473,7 @@ function parseExcelJsonTo2DArrays(jsonData) {
       formulasR1C1: formulas,
       numberFormat: numberFormats
     });
-          sheet_cells.setCellProperties(properties);
+          // sheet_cells.setCellProperties(properties);
           sheet_cells.untrack();
 
           await context.sync();
@@ -556,8 +492,10 @@ function parseExcelJsonTo2DArrays(jsonData) {
 
     try {
       const formData = new FormData(e.currentTarget);
-      const textArea = formData.get("textArea");
-      const jsonData = JSON.parse(textArea as string);
+      const file = formData.get("jsonFile") as File;
+    if (!file) throw new Error("No file selected");
+    const text = await file.text();
+    const jsonData = JSON.parse(text);
       await writeWorkbook(jsonData);
     } catch (error) {
   // Compose a detailed error message with stack trace
@@ -672,17 +610,16 @@ function parseExcelJsonTo2DArrays(jsonData) {
           <form className={styles.form} onSubmit={handleSubmitWrite}>
             <div className={styles.formContent}>
               <div className={styles.inputWrapper}>
-                <Label className={styles.label} htmlFor={textAreaId}>JSON Data</Label>
-                <Textarea 
-                  resize="vertical" 
-                  required 
-                  id={textAreaId} 
-                  name="textArea" 
-                  placeholder="Paste your JSON data here..."
-                  style={{ minHeight: "200px" }}
-                  className={styles.input}
-                />
-              </div>
+  <Label className={styles.label} htmlFor={textAreaId}>JSON Data File</Label>
+  <input
+    type="file"
+    accept=".json,application/json"
+    id={textAreaId}
+    name="jsonFile"
+    required
+    className={styles.input}
+  />
+</div>
 
               <div className={styles.buttonContainer}>
                 <Button