veridian/app/components/FileSelector.vue

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

const MAX_RETRIES = 3;
const RETRY_BASE_DELAY_MS = 1000;

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;
    retryCount: number;
}[]>({ required: false, default: [] });
const rawFiles = ref<File[]>([]);

const activeUploads = ref<Map<string, XMLHttpRequest>>(new Map());
const pendingFiles = ref<Map<string, File>>(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);
            if (xhr.status >= 400) {
                reject(new Error(`Upload failed with status ${xhr.status}`));
            } else {
                resolve(xhr);
            }
        };

        xhr.onerror = () => {
            activeUploads.value.delete(id);
            reject(new Error('Network error during upload'));
        };

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

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

const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));

const uploadFileAttempt = async (file: File, id: string, fileName: string, fileType: string) => {
    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,
            size: file.size,
            url: assetUrl,
        },
    });
};

const uploadFile = async (file: File) => {
    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,
        retryCount: 0,
    });
    pendingFiles.value.set(id, file);

    await attemptUpload(file, id, fileName, fileType);
};

const attemptUpload = async (file: File, id: string, fileName: string, fileType: string, attempt = 0) => {
    try {
        await uploadFileAttempt(file, id, fileName, fileType);

        files.value = files.value.map(f => {
            if (f.id === id) {
                return { ...f, status: 'uploaded' as const, progress: 100 };
            }
            return f;
        });
        pendingFiles.value.delete(id);
    } catch (error) {
        if (error instanceof Error && error.message === 'Upload aborted') {
            pendingFiles.value.delete(id);
            return;
        }

        const nextAttempt = attempt + 1;

        if (nextAttempt < MAX_RETRIES) {
            files.value = files.value.map(f => {
                if (f.id === id) {
                    return { ...f, retryCount: nextAttempt, progress: 0 };
                }
                return f;
            });

            const delay = RETRY_BASE_DELAY_MS * Math.pow(2, attempt);
            await sleep(delay);

            const stillExists = files.value.some(f => f.id === id);
            if (!stillExists) return;

            files.value = files.value.map(f => {
                if (f.id === id) {
                    return { ...f, status: 'uploading' as const };
                }
                return f;
            });

            await attemptUpload(file, id, fileName, fileType, nextAttempt);
        } else {
            files.value = files.value.map(f => {
                if (f.id === id) {
                    return { ...f, status: 'error' as const };
                }
                return f;
            });
        }
    }
};

const retryFile = async (id: string) => {
    const file = pendingFiles.value.get(id);
    if (!file) return;

    const entry = files.value.find(f => f.id === id);
    if (!entry) return;

    files.value = files.value.map(f => {
        if (f.id === id) {
            return { ...f, status: 'uploading' as const, progress: 0, retryCount: 0 };
        }
        return f;
    });

    await attemptUpload(file, id, entry.name, entry.mimeType);
};

defineExpose({ uploadFile, retryFile });

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);
        }

        pendingFiles.value.delete(removedFile.id);

        if (removedFile.url.startsWith('blob:')) {
            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>