fileserver/frontend/src/components/FileViewer/BlobDownload.tsx

import { ref } from 'vue';
import { NProgress } from 'naive-ui';
import filesize from 'filesize';
import { Music, Video, Image, Document } from '@vicons/carbon';
import type { DialogApiInjection } from 'naive-ui/es/dialog/src/DialogProvider';

export default function createBlobDialog(
	dialog: DialogApiInjection,
	image: boolean,
	audio: boolean,
	video: boolean
) {
	const progress = ref(0);
	const total = ref(1);
	const percentage = ref(0);
	const dia = dialog.create({
		title:
			'Loading ' +
			(video ? 'video' : audio ? 'audio' : image ? 'image' : 'content') +
			'...',
		closable: false,
		closeOnEsc: false,
		maskClosable: false,
		icon: () =>
			video ? (
				<Video />
			) : audio ? (
				<Music />
			) : image ? (
				<Image />
			) : (
				<Document />
			),
		content: () => (
			<NProgress
				type="line"
				percentage={percentage.value}
				height={20}
				status="info"
				showIndicator={false}
			/>
		),
		action: () => (
			<div>
				{filesize(progress.value, {
					base: 2,
					standard: 'jedec'
				})}
				/
				{filesize(total.value, {
					base: 2,
					standard: 'jedec'
				})}
				- {Math.floor(percentage.value * 1000) / 1000}%
			</div>
		)
	});
	return { progress, total, percentage, dia };
}