veridian/app/components/FileSelector.vue

<script setup lang="ts">
import { nanoid } from 'nanoid';

const props = defineProps<{
    selectedModel?: ModelWithProvider | null;
}>();

const imageInputRef = ref<HTMLInputElement | null>(null);
const fileInputRef = ref<HTMLInputElement | null>(null);

const files = defineModel<{
    id: string;
    name: string;
    mimeType: string;
    status: 'uploading' | 'uploaded' | 'error';
    url: string;
    progress: number;
}[]>({ required: false, default: [] });
const rawFiles = ref<File[]>([]);

const activeUploads = ref<Map<string, XMLHttpRequest>>(new Map());

const uploadWithProgress = (file: File, url: string, id: string) => {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        activeUploads.value.set(id, xhr);

        xhr.upload.onprogress = (e) => {
            if (e.lengthComputable) {
                const progress = Math.round((e.loaded / e.total) * 100);
                files.value = files.value.map(f => {
                    if (f.id === id) {
                        return { ...f, progress };
                    }
                    return f;
                });
            }
        };

        xhr.onload = () => {
            activeUploads.value.delete(id);
            resolve(xhr);
        };

        xhr.onerror = () => {
            activeUploads.value.delete(id);
            reject(xhr);
        };

        xhr.onabort = () => {
            activeUploads.value.delete(id);
            reject(new Error('Upload aborted'));
        };

        xhr.open('PUT', url);
        xhr.send(file);
    });
};

const uploadFile = async (file: File) => {
    try {
        const id = nanoid();
        const fileName = file.name || `${id}.png`;
        const fileType = file.type || 'application/octet-stream';

        files.value.push({
            id,
            name: fileName,
            mimeType: fileType,
            status: 'uploading',
            url: URL.createObjectURL(file),
            progress: 0
        });

        const { url: uploadUrl, assetUrl } = await $fetch('/api/upload/presigned', {
            method: 'POST',
            body: {
                file: {
                    name: fileName,
                    mimeType: fileType,
                }
            },
        }) as { url: string; assetUrl: string };

        await uploadWithProgress(file, uploadUrl, id);

        await $fetch('/api/file', {
            method: 'POST',
            body: {
                id,
                name: fileName,
                mimeType: fileType,
                url: assetUrl,
            },
        })

        files.value = files.value.map(f => {
            if (f.name === file.name) {
                return {
                    ...f,
                    status: 'uploaded',
                    progress: 100
                };
            }
            return f;
        });
    } catch (error) {
        files.value = files.value.map(f => {
            if (f.name === file.name) {
                return {
                    ...f,
                    status: 'error'
                };
            }
            return f;
        });
    }
}

defineExpose({ uploadFile });

watch(rawFiles, async (newFiles, oldFiles) => {
    const diff = newFiles.filter(f =>
        !oldFiles.find(o => o.name === f.name) &&
        !files.value.find(existing => existing.name === f.name)
    );

    if (diff.length === 0) return;

    await Promise.all(diff.map(async file => uploadFile(file)));
})

watch(files, async (newFiles, oldFiles) => {
    if (!oldFiles) return;

    const newIds = new Set(newFiles.map(f => f.id));
    const removed = oldFiles.filter(f => !newIds.has(f.id));

    rawFiles.value = rawFiles.value.filter(f => removed.find(r => r.name === f.name));

    for (const removedFile of removed) {
        const xhr = activeUploads.value.get(removedFile.id);
        if (xhr) {
            xhr.abort();
            activeUploads.value.delete(removedFile.id);
        }

        if (removedFile.url.startsWith('blob:')) {
            // we knpw that if the url starts with blob: it was the first time we uploaded it
            // so we can just delete it
            if (removedFile.status === 'uploaded') {
                await $fetch(`/api/file/${removedFile.id}`, {
                    method: 'DELETE',
                })
            }

            URL.revokeObjectURL(removedFile.url);
        }
    }
}, { deep: true });

const handleFileChange = (e: Event) => {
    const inputFiles = (e.target! as HTMLInputElement).files;
    if (inputFiles === null) return;

    rawFiles.value = [...rawFiles.value, ...inputFiles];

    (e.target! as HTMLInputElement).value = '';
}

onMounted(() => {
    imageInputRef.value?.addEventListener('change', (e) => handleFileChange(e));
    fileInputRef.value?.addEventListener('change', (e) => handleFileChange(e));
});

onUnmounted(() => {
    imageInputRef.value?.removeEventListener('change', (e) => handleFileChange(e));
    fileInputRef.value?.removeEventListener('change', (e) => handleFileChange(e));
});
</script>

<template>
    <input ref="imageInputRef" type="file" multiple accept="image/*" class="hidden" />
    <input ref="fileInputRef" type="file" multiple class="hidden" />
    <Dropdown dropdownClass="text-sm" placement="top">
        <template #default="{ toggle, setRef }">
            <button :ref="setRef" @click="toggle"
                class="flex items-center justify-center h-8.5 w-8.5 @hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
                <span class="pointer-events-none i-mynaui-paperclip text-5 text-[var(--text-secondary)]"></span>
            </button>
        </template>

        <template #dropdown="{ close }">
            <button
                :disabled="selectedModel ? selectedModel.inputModalities.filter(p => p !== 'text').length === 0 : true"
                @click="imageInputRef?.click(); close()"
                class="text-left px-3 py-1.5 items-center gap-2 enabled:@hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150 disabled:cursor-not-allowed disabled:opacity-50">
                <span class="text-4.5 i-tabler-photo-plus"></span>
                <span>Upload image</span>
            </button>
            <button @click="fileInputRef?.click(); close()"
                class="text-left px-3 py-1.5 items-center gap-2 @hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150">
                <span class="text-4.5 i-mynaui-file-plus"></span>
                <span>Upload file</span>
            </button>
        </template>
    </Dropdown>
</template>