1  import React, { useState, useEffect } from "react";
  2  import { useAuth } from "@/auth/hooks/useAuth";
  3  import styles from "@/styles/Home.module.scss";
  4  import CRC32 from "crc-32";
  5  
  6  function ExpeFileUpload() {
  7    const [selectedFile, setSelectedFile] = useState(null);
  8    const { walletCanister } = useAuth();
  9  
 10    const handleFileChange = (event) => {
 11      const file = event.target.files[0];
 12      setSelectedFile(file);
 13    };
 14  
 15    const handleExpeFileUpload = async (selectedFile, walletCanister) => {
 16      const batch_id = "expe_file";
 17      const asset_uint8Array = new Uint8Array(selectedFile);
 18      const chunkSize = 2000000;
 19      let checksum = 0;
 20      const chunkIds = []; // Initialize an array to store chunk identifiers
 21      const lastChunkSize = asset_uint8Array.length % chunkSize;
 22      const isLastChunk = lastChunkSize !== 0;
 23  
 24      for (
 25        let start = 0, index = 0;
 26        start < asset_uint8Array.length;
 27        start += chunkSize, index++
 28      ) {
 29        let chunkSizeToUse = chunkSize;
 30  
 31        // If it's the last chunk and it's smaller than chunkSize, use the actual size
 32        if (
 33          isLastChunk &&
 34          index === Math.floor(asset_uint8Array.length / chunkSize)
 35        ) {
 36          chunkSizeToUse = lastChunkSize;
 37        }
 38  
 39        const chunk = asset_uint8Array.slice(start, start + chunkSizeToUse);
 40  
 41        // Calculate checksum for the chunk
 42        const chunkChecksum = updateChecksum(chunk, checksum);
 43        console.log("Chunk Checksum:", chunkChecksum);
 44  
 45        // Generate a unique identifier for the chunk (example: using the loop index)
 46        const chunkId = index;
 47  
 48        // Push the chunk identifier to the array
 49        chunkIds.push(chunkId);
 50  
 51        console.log("Array of chunk identifiers:", chunkIds);
 52  
 53        try {
 54          const response = await walletCanister.upload_expe_file({
 55            checksum: chunkChecksum,
 56            chunk_ids: chunkIds, //Array of chunk identifiers
 57            file_type: "application/pdf",
 58            content_encoding: { GZIP: null },
 59          });
 60          console.log("Chunk upload response:", response);
 61        } catch (error) {
 62          console.error("Error uploading chunk:", error);
 63        }
 64      }
 65    };
 66  
 67    // Function to calculate updated checksum
 68    function updateChecksum(chunk, checksum) {
 69      const moduloValue = 400000000; // Range: 0 to 400_000_000
 70      const signedChecksum = CRC32.buf(Buffer.from(chunk, "binary"), 0);
 71      const unsignedChecksum = signedChecksum >>> 0;
 72      const updatedChecksum = (checksum + unsignedChecksum) % moduloValue;
 73      return updatedChecksum;
 74    }
 75  
 76    const fileQueryUrl = async (walletCanister) => {
 77      try {
 78        const queryResponse = await walletCanister.query_expe_file_url();
 79        console.log("Here is the file query url: ", queryResponse);
 80      } catch (queryError) {
 81        console.error("Failed to get query url:", queryError);
 82      }
 83    };
 84  
 85    const handleSubmit = (event) => {
 86      event.preventDefault();
 87  
 88      if (!walletCanister) {
 89        console.log("Wallet canister is not initialized");
 90        return;
 91      }
 92      console.log("Wallet canister is succesfully initialzed: ", walletCanister);
 93  
 94      if (!selectedFile) {
 95        console.log("Please select a file before submitting");
 96        return;
 97      }
 98      console.log("Selected File: ", selectedFile);
 99  
100      try {
101        handleExpeFileUpload(selectedFile, walletCanister);
102        fileQueryUrl(walletCanister);
103        console.log("File upload and query completed successfully");
104      } catch (error) {
105        console.error(
106          "There was an error with file upload and file url query:",
107          error,
108        );
109      }
110    };
111  
112    return (
113      <div>
114        <main>
115          <div>
116            <div>
117              <h3 className={styles.uploadForm}>Export File Upload</h3>
118              <form onSubmit={handleSubmit} className={styles.uploadForm}>
119                <input
120                  type="file"
121                  onChange={handleFileChange}
122                  className={styles.uploadInput}
123                />
124                <button type="submit" className={styles.uploadButton}>
125                  Upload
126                </button>
127              </form>
128            </div>
129          </div>
130        </main>
131      </div>
132    );
133  }
134  
135  export default ExpeFileUpload;