1  import React, { useState } 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 CaprFileUpload() {
  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 handleCaprFileUpload = async (selectedFile, walletCanister) => {
 16      const batch_id = "capr_file";
 17      const asset_uint8Array = new Uint8Array(selectedFile);
 18      const chunkSize = 2000000;
 19      let checksum = 0;
 20      const chunkIds = [];
 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 (
 32          isLastChunk &&
 33          index === Math.floor(asset_uint8Array.length / chunkSize)
 34        ) {
 35          chunkSizeToUse = lastChunkSize;
 36        }
 37  
 38        const chunk = asset_uint8Array.slice(start, start + chunkSizeToUse);
 39  
 40        const chunkChecksum = updateChecksum(chunk, checksum);
 41        console.log("Chunk Checksum:", chunkChecksum);
 42  
 43        const chunkId = index;
 44  
 45        chunkIds.push(chunkId);
 46  
 47        console.log("Array of chunk identifiers:", chunkIds);
 48  
 49        try {
 50          const response = await walletCanister.upload_capr_file({
 51            checksum: chunkChecksum,
 52            chunk_ids: chunkIds, //Array of chunk identifiers
 53            file_type: "application/pdf",
 54            content_encoding: { GZIP: null },
 55          });
 56          console.log("Chunk upload response:", response);
 57        } catch (error) {
 58          console.error("Error uploading chunk:", error);
 59        }
 60      }
 61    };
 62  
 63    // Function to calculate updated checksum
 64    function updateChecksum(chunk, checksum) {
 65      const moduloValue = 400000000; // Range: 0 to 400_000_000
 66      const signedChecksum = CRC32.buf(Buffer.from(chunk, "binary"), 0);
 67      const unsignedChecksum = signedChecksum >>> 0;
 68      const updatedChecksum = (checksum + unsignedChecksum) % moduloValue;
 69      return updatedChecksum;
 70    }
 71  
 72    const fileQueryUrl = async (walletCanister) => {
 73      try {
 74        const queryResponse = await walletCanister.query_capr_file_url();
 75        console.log("Here is the file query url: ", queryResponse);
 76      } catch (queryError) {
 77        console.error("Failed to get query url:", queryError);
 78      }
 79    };
 80  
 81    const handleSubmit = (event) => {
 82      event.preventDefault();
 83  
 84      if (!walletCanister) {
 85        console.log("Wallet canister is not initialized");
 86        return;
 87      }
 88      console.log("Wallet canister is succesfully initialzed: ", walletCanister);
 89  
 90      if (!selectedFile) {
 91        console.log("Please select a file before submitting");
 92        return;
 93      }
 94      console.log("Selected File: ", selectedFile);
 95  
 96      try {
 97        handleCaprFileUpload(selectedFile, walletCanister);
 98        fileQueryUrl(walletCanister);
 99        console.log("File upload and query completed successfully");
100      } catch (error) {
101        console.error(
102          "There was an error with file upload and file url query:",
103          error,
104        );
105      }
106    };
107  
108    // Function to calculate updated checksum
109    function updateChecksum(chunk, checksum) {
110      const moduloValue = 400000000;
111      const signedChecksum = CRC32.buf(Buffer.from(chunk.buffer), 0);
112      const unsignedChecksum = signedChecksum >>> 0;
113      const updatedChecksum = (checksum + unsignedChecksum) % moduloValue;
114      return updatedChecksum;
115    }
116  
117    return (
118      <div>
119        <main>
120          <div>
121            <div>
122              <h3 className={styles.uploadForm}>Capr File Upload</h3>
123              <form onSubmit={handleSubmit} className={styles.uploadForm}>
124                <input
125                  type="file"
126                  onChange={handleFileChange}
127                  className={styles.uploadInput}
128                />
129                <button type="submit" className={styles.uploadButton}>
130                  Upload
131                </button>
132              </form>
133            </div>
134          </div>
135        </main>
136      </div>
137    );
138  }
139  
140  export default CaprFileUpload;