This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@slide-computer/assets

Manage assets on an Internet Computer assets canister

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