Issue with Updating Progress Bar

[vagx]

I'm experiencing an issue with updating the progress bar dynamically while using magick-wasm in a web application. The progress is correctly logged to the console during the conversion process, but the progress bar element itself doesn't update accordingly.

import wasmUrl from '@imagemagick/magick-wasm/magick.wasm?url';
import { initializeImageMagick, ImageMagick, MagickFormat } from '@imagemagick/magick-wasm';

const wasmResponse = await fetch(wasmUrl);
const wasmBuffer = await wasmResponse.arrayBuffer();
const wasmUint8Array = new Uint8Array(wasmBuffer);
await initializeImageMagick(wasmUint8Array);

const inputFile: HTMLInputElement = document.querySelector('#input-file');
const progress: HTMLProgressElement = document.querySelector('#progress');

const convert = async (file: File) => {
	const buffer = await file.arrayBuffer();
	const imageUint8Array = new Uint8Array(buffer);

	ImageMagick.read(imageUint8Array, image => {
		let prevProgress = 0;
		image.onProgress = event => {
			const currentProgress = +event.progress.multiply(1000000).toFixed(0);
			if (currentProgress > prevProgress) {
				progress.value = currentProgress;
				console.log(currentProgress);
				prevProgress = currentProgress;
			}
		};

		image.write(MagickFormat.Png, data => {
			const blob = new Blob([data], { type: 'image/png' });
			const downloadLink = document.createElement('a');
			downloadLink.href = URL.createObjectURL(blob);
			downloadLink.download = 'output.png';
			downloadLink.textContent = `Download output.png`;
			document.body.appendChild(downloadLink);
		});
	});
};

const onChange = async (e: Event) => {
	convert((<HTMLInputElement>e.target).files[0]);
};

inputFile.addEventListener('change', onChange);

Despite the progress being logged correctly to the console, the progress bar remains unchanged until the end of the conversion process.

What am I doing wrong?

[dlemstra]

I don't know what could be causing this. If you have a complete small example in a GitHub repository that I can use I might be able to help you figure out what is causing this.

[vagx]

Here an example repo and app.
Progress is shown in the console, but not on the page.

[dlemstra]

Thanks for the example and I can reproduce it. It looks like the methods are only called after the wasm code finishes executing. I will probably need to remove the onProgress event until I have a proper solution for this because it is not very useful now.

I don't know yet how this can be fixed so I would love to get some help from the community with this.