In svelte, how to bind an async function to an attribute?

Question

In my code,

I have an image class, the image class loads an image as a data url.

    class Image {
    constructor(name, file, timestamp) {
        this.name = name;
        this.file = file;
        this.timestamp = timestamp;
    }

    async load() {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.readAsDataURL(this.file);
            reader.onload = (readerEvent) => {
                resolve(readerEvent.target.result);
            };
        });
    }
}

let images = []; // an array of class Image

then I want to render the images, but the image.load function doesn't seem to be called.

<div class="navbar">
    {#each images as image}
        <li><img bind:this={image} alt={image.name} src={image.load} /></li>
    {/each}
</div>

I have tried

await image.load() // this doesn't compile

image.load() // this compiles, but doesn't work.

they don't work

this is how I initialize the array

function openFiles() {
    if (window.indexedDB) {
        let db = await (async () => {
            return new Promise((resolve, reject) => {
                let request = window.indexedDB.open("DirHandle", 1);
                request.onerror = function (event) {
                    console.log("request error: ", request.errorCode);
                    reject(request.errorCode);
                };
                request.onsuccess = function (event) {
                    console.log("request success!");
                    let db = event.target.result;
                    db.onerror = function (event) {
                        console.log("db err:", event.target.errorCode);
                        reject(event.target.errorCode);
                    };
                    resolve(db);
                };
                request.onupgradeneeded = function (event) {
                    console.log("need to init");
                    let db = event.target.result;
                    let objectStore = db.createObjectStore("dir", {
                        autoIncrement: true,
                    });
                };
            });
        })();
        var transaction = db.transaction(["dir"], "readwrite");
        // Do something when all the data is added to the database.
        transaction.oncomplete = function (event) {
            console.log("transaction All done!");
        };

        transaction.onerror = function (event) {
            // Don't forget to handle errors!
            console.log("transaction error");
        };

        let dirStore = transaction.objectStore("dir");
        let request = dirStore.get(10);
        request.onsuccess = async function (event) {
            console.log("loaded!");
            dirhandle = request.result;
            const opts = {};
            opts.mode = "readwrite";
            if ((await dirhandle.queryPermission(opts)) === "granted") {
                console.log("permission granted already");
            } else {
                console.log("not granted already when loading");
                try {
                    if (
                        (await dirhandle.requestPermission(opts)) ===
                        "granted"
                    ) {
                    } else {
                        console.log("failed to get permissions");
                    }
                } catch (e) {
                    console.log("e", e);
                }
            }

            for await (const entry of dirhandle.values()) {
                    console.log(
                        entry.kind,
                        entry.name,
                        await entry.getFile()
                    );
                    files.set(entry.name, await entry.getFile());
                }
                images = [];
                files.forEach((value, key, map) => {
                    images.push(new Image(key, value, value.timestamp));
            });
        };
    }
}

You don't show how you initialize the image array (create Image instances). — voscausa
that code is very complex and I don't think it's relevant, as I checked the data correctness. but I included it anyway. I think the issue is that load() function is not called. — Bill Yan

Thomas Hennes Thomas Hennes · Accepted Answer · 2020-11-06T22:09:10

image.load() returns a promise, so you would need to use an #await block in your rendering loop:

<div class="navbar">
    {#each images as image}
        <li>
            {#await image.load()}
                <span>{`Loading ${image.name}...`}</span>
            {:then src}
                <img bind:this={image} alt={image.name} {src} />
            {:catch error}
                <span>{`Error loading ${image.name}: ${error.message}`}
            {/await}
        </li>
    {/each}
</div>

In svelte, how to bind an async function to an attribute?

1 Answers