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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user