replace upload dropzone with global intake controls.

Window drag-drop and paste share the same pick path as the file chooser; configure modal lives in the intake component.
This commit is contained in:
2026-10-29 21:40:07 +01:00
parent ebe8b9aa2f
commit 9cc73e0dc5
4 changed files with 195 additions and 103 deletions
+15 -45
View File
@@ -1,32 +1,16 @@
<template>
<main class="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-6 p-8">
<div>
<h1 class="text-2xl font-semibold tracking-tight">Upload</h1>
<p class="mt-2 text-sm text-muted-foreground">
Choose up to {{ maxQueueSize }} images, up to
{{ maxImageSizeFormatted }}
each.
</p>
</div>
<div class="flex flex-col gap-2">
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<UploadDropzone
ref="dropzoneRef"
:disabled="loadingMetadata || batchUploading"
@pick="onFilesPicked"
/>
<button
v-if="!uploadConfirmed"
type="button"
class="inline-flex shrink-0 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60 sm:self-center"
:disabled="!canOpenConfigure"
@click="configureModalOpen = true"
>
Configure & upload
</button>
</div>
<UploadIntakeControls
ref="intakeControlsRef"
v-model:settings="batchSettings"
:disabled="loadingMetadata || batchUploading"
:can-open-configure="canOpenConfigure"
:upload-confirmed="uploadConfirmed"
:metadata-error-count="metadataErrorCount"
@pick="onFilesPicked"
@upload="onBatchUpload"
/>
<p v-if="selectionError" class="text-sm text-destructive">{{ selectionError }}</p>
</div>
@@ -37,26 +21,15 @@
<UploadQueueList :rows="queueRows" :selected-file="selectedFile" @select="selectedFile = $event" />
<UploadShareResults
v-if="showShareLinks"
:file-name="selectedFile?.name ?? null"
:upload="selectedUpload"
/>
<UploadShareResults v-if="showShareLinks" :file-name="selectedFile?.name ?? null" :upload="selectedUpload" />
<MetadataInspector :file-name="selectedFile?.name ?? null" :entry="selectedPreview" />
<UploadConfigureModal
v-model:open="configureModalOpen"
v-model:settings="batchSettings"
:metadata-error-count="metadataErrorCount"
@upload="onBatchUpload"
/>
</main>
</template>
<script setup lang="ts">
import { computed, onBeforeMount, ref } from 'vue';
import type UploadDropzone from '@/components/upload/UploadDropzone.vue';
import type UploadIntakeControls from '@/components/upload/UploadIntakeControls.vue';
import { config } from '@/config';
import { useExiftoolStore } from '@/stores/exiftool';
import { useMetadataStore } from '@/stores/metadata';
@@ -83,7 +56,7 @@ const selectedFile = ref<File | null>(null);
const selectionError = ref<string | null>(null);
const loadingMetadata = ref(false);
const batchUploading = ref(false);
const dropzoneRef = ref<InstanceType<typeof UploadDropzone> | null>(null);
const intakeControlsRef = ref<InstanceType<typeof UploadIntakeControls> | null>(null);
const batchSettings = ref<UploadBatchSettingsForm>({
mode: 'zk',
expiryPreset: 'never',
@@ -91,7 +64,6 @@ const batchSettings = ref<UploadBatchSettingsForm>({
passwordEnabled: false,
password: ''
});
const configureModalOpen = ref(false);
const uploadConfirmed = ref(false);
const showShareLinks = ref(false);
const confirmedBatchSummary = ref<string | null>(null);
@@ -183,8 +155,8 @@ const resetUploadSession = (): void => {
queuedFiles.value = [];
selectedFile.value = null;
clearAllUploads();
dropzoneRef.value?.clearInput();
configureModalOpen.value = false;
intakeControlsRef.value?.clearInput();
intakeControlsRef.value?.closeConfigureModal();
uploadConfirmed.value = false;
showShareLinks.value = false;
confirmedBatchSummary.value = null;
@@ -195,8 +167,6 @@ const onBatchUpload = async (uploadDespiteMetadataFailure?: boolean): Promise<vo
confirmedBatchSummary.value = formatUploadBatchSettingsSummary(settings);
uploadConfirmed.value = true;
configureModalOpen.value = false;
batchUploading.value = true;
try {