File Storage On IC

jzxchiang · December 2, 2021, 9:00pm

Hopefully this code helps:

dfinity/cancan/blob/45e519f6252a182e1f90ffcdf4af69aca7cb5f2a/scripts/seed.ts#L132

    
      
          
          
  // upload png
            console.time(`Stored video thumbnail for ${video.name}`);
            const videoPicFile = fs.readFileSync(videoPicPath);
            const videoPicArray = videoPicFile.buffer.slice(0);
            const picAsNat = encodeArrayBuffer(videoPicArray);
            await canister.putVideoPic(videoId, [picAsNat]);
            console.timeEnd(`Stored video thumbnail for ${video.name}`);
          }
          
          
function chunkFile(filePath) {
            const file = fs.readFileSync(filePath);
            const fileStats = fs.statSync(filePath);
            const fileSize = fileStats.size;
          
          
  let chunk = 1;
            const chunks: number[][] = [];
            for (
              let byteStart = 0;
              byteStart < fileSize;
              byteStart += MAX_CHUNK_SIZE, chunk++

This is how CanCan chunks video files. Basically, take a big byte array (i.e. Array<number>) and split it up!

Here’s another one:

github.com

dfinity/cancan/blob/6b28a79b5415261174bd82bc6f75ff1a3c316b7e/src/utils/video.ts#L45

    
      
          }
          
          
// Divides the file into chunks and uploads them to the canister in sequence
          async function processAndUploadChunk(
            videoBuffer: ArrayBuffer,
            byteStart: number,
            videoSize: number,
            videoId: string,
            chunk: number
          ) {
            const videoSlice = videoBuffer.slice(
              byteStart,
              Math.min(videoSize, byteStart + MAX_CHUNK_SIZE)
            );
            const sliceToNat = encodeArrayBuffer(videoSlice);
            return putVideoChunk(videoId, chunk, sliceToNat);
          }
          
          
// Wraps up the previous functions into one step for the UI to trigger
          async function uploadVideo(userId: string, file: File, caption: string) {
            const videoBuffer = (await file?.arrayBuffer()) || new ArrayBuffer(0);

The tricky part IMO is getting this byte array from a file. You might need to use blobs or ArrayBuffers or something like that… it’s in this code.

Topic		Replies	Views
Storing large 1080p+ MP4 on the InternetComputer Developers	6	1374	October 22, 2021
Clearing up confusion over dynamically storing & serving large assets Developers	1	789	May 4, 2023
So the IC can't store files well either? General	16	3069	August 8, 2022
IPFS vs IC for large amount of files cost-wise comparison Developers	1	846	July 16, 2021
Looking for an IC hosted data storage solution Programs & Applications	1	70	August 19, 2024

File Storage On IC

Related topics