Norwegian Peat Moss

    @slide-computer/assets
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.0 • Public • Published

    @slide-computer/assets

    Manage assets on an Internet Computer assets canister

    NPM

    Install

    npm install @slide-computer/assets

    Usage

    AssetManager supports the (chunked) upload of File, Blob, ArrayBuffer, Uint8Array and number[].

    // Create asset manager instance
    import { AssetManager } from '@slide-computer/assets';
    
    const canisterId = ...; // Canister id of the asset canister
    const agent = ...; // Agent with an authorized identity
    const assetManager = new AssetManager({
        canisterId,
        agent,
        concurrency: 32, // Optional (default: 32), max concurrent requests.
        maxSingleFileSize: 450000, // Optional bytes (default: 450000), larger files will be uploaded as chunks.
        maxChunkSize: 1900000, // Optional bytes (default: 1900000), size of chunks when file is uploaded as chunks.
    });
    // Select file and upload to asset canister in browser
    const input = document.createElement('input');
    input.type = 'file';
    input.addEventListener('change', async () => {
        const file = e.target.files[0];
        const key = await assetManager.insert(file); // example.csv
    });
    input.click();
    // Read file from disk and upload to asset canister in Node
    import fs from 'fs';
    
    const file = fs.readFileSync('./example.csv');
    const key = await assetManager.insert(file, {fileName: 'example.csv'});
    // Delete file from asset canister
    const key = '/path/to/example.jpg'
    await assetManager.delete(key);
    // Upload multiple files and delete an old file
    import fs from 'fs';
    
    const banana = fs.readFileSync('./banana.png');
    const apple = fs.readFileSync('./apple.png');
    const strawberry = fs.readFileSync('./strawberry.png');
    const batch = assetManager.batch();
    const keys = [
        await batch.insert(banana, {fileName: 'banana.png'}),
        await batch.insert(apple, {fileName: 'apple.png', path: '/directory/with/apples'}),
        await batch.insert(strawberry, {fileName: 'strawberry.png'}),
    ];
    await batch.delete('/path/to/old/file.csv');
    await batch.commit();
    // Read file from disk, compress with gzip and upload to asset canister in Node
    // Recommended for HTML and JS files
    import fs from 'fs';
    import pako from 'pako';
    
    const file = fs.readFileSync('./index.html');
    const gzippedFile = pako.gzip(file);
    const key = await assetManager.insert(gzippedFile, {
        fileName: 'index.html',
        contentEncoding: 'gzip', // Optional (default: 'identity'), supported encodings are 'identity', 'gzip', 'compress', 'deflate' and 'br'
    });
    // Log total upload progress of all files
    import { AssetManager } from '@slide-computer/assets';
    
    const progress = {};
    const eventListener = (event) => {
        if (event.type === 'insert') {
            // Update progress of key in map
            progress[event.key] = event.progress;
            // Get total progress of all files in map
            const {current, total} = Object.values(progress).reduce((acc, val) => ({
                current: acc.current + val.current,
                total: acc.total + val.total,
            }), {current: 0, total: 0});
            // Log total progress to console (current bytes / total bytes)
            console.log(`Progress: ${Math.floor(current / total * 100)}%`)
        }
    };
    const canisterId = ...; // Canister id of the asset canister
    const agent = ...; // Agent with an authorized identity
    const assetManager = new AssetManager({
        canisterId,
        agent,
        eventListener,
    });
    
    const input = document.createElement('input');
    input.type = 'file';
    input.multiple = true;
    input.addEventListener('change', async () => {
        const keys = await Promise.all(Array.from(e.target.files).map(assetManager.insert));
    });
    input.click();

    License

    MIT © https://github.com/slide-computer

    Install

    npm i @slide-computer/assets

    DownloadsWeekly Downloads

    1

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    116 kB

    Total Files

    17

    Last publish

    Collaborators

    • sea-snake