nobswebdev/private_image
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extract upload dropzone and queue UI with shared pick validation utils.

Browse Source
This commit is contained in:
nobswebdev
2026-10-20 22:20:16 +02:00
parent 3ab66c250c
commit d82d451448
12 changed files with 547 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/UploadView.vue
+22 -93
View File
@@ -9,44 +9,14 @@
</p>
</div>
<div>
<label
class="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:opacity-90"
:class="loadingMetadata ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'"
>
Choose images
<input
ref="fileInputRef"
type="file"
accept="image/*"
multiple
class="sr-only"
:disabled="loadingMetadata"
@change="onFileInputChange"
/>
</label>
<UploadDropzone
ref="dropzoneRef"
:disabled="loadingMetadata"
:selection-error="selectionError"
@pick="onFilesPicked"
/>
<p v-if="selectionError" class="mt-2 text-sm text-destructive">{{ selectionError }}</p>
</div>
<ul v-if="queueRows.length > 0" class="divide-y divide-border rounded-lg border border-border">
<li v-for="row in queueRows" :key="row.key">
<button
type="button"
class="flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-muted/60"
:class="isFileSelected(row.file) ? 'bg-muted/80' : ''"
@click="selectedFile = row.file"
>
<span class="min-w-0 flex-1 truncate text-sm font-medium">{{ row.file.name }}</span>
<span class="shrink-0 text-xs text-muted-foreground">
{{ prettyBytes(row.file.size, { maximumFractionDigits: 1 }) }}
</span>
<span class="shrink-0 text-xs" :class="statusTextClass(row.preview)">
{{ row.preview.message }}
</span>
</button>
</li>
</ul>
<UploadQueueList :rows="queueRows" :selected-file="selectedFile" @select="selectedFile = $event" />
<MetadataInspector :file-name="selectedFile?.name ?? null" :entry="selectedPreview" />
</main>
@@ -54,12 +24,12 @@
<script setup lang="ts">
import { computed, onBeforeMount, ref } from 'vue';
import MetadataInspector from '@/components/upload/MetadataInspector.vue';
import type UploadDropzone from '@/components/upload/UploadDropzone.vue';
import { config } from '@/config';
import { useExiftoolStore } from '@/stores/exiftool';
import { useMetadataStore } from '@/stores/metadata';
import type { MetadataPreviewEntry } from '@/types/metadata/MetadataPreview';
import type { PickedUploadAnalysis } from '@/types/upload/PickedUploadAnalysis';
import { analyzePickedUploadFiles } from '@/utils/upload/analyzePickedUploadFiles';
import { buildPickedUploadWarning } from '@/utils/upload/buildPickedUploadWarning';
import prettyBytes from 'pretty-bytes';
const { maxQueueSize, maxImageBytes } = config.validation.upload;
@@ -74,7 +44,7 @@ const queuedFiles = ref<File[]>([]);
const selectedFile = ref<File | null>(null);
const selectionError = ref<string | null>(null);
const loadingMetadata = ref(false);
const fileInputRef = ref<HTMLInputElement | null>(null);
const dropzoneRef = ref<InstanceType<typeof UploadDropzone> | null>(null);
onBeforeMount(async () => {
try {
@@ -96,27 +66,22 @@ const queueRows = computed(() =>
const selectedPreview = computed(() => getPreview(selectedFile.value));
const isFileSelected = (file: File): boolean =>
selectedFile.value !== null && makeKeyFromFile(selectedFile.value) === makeKeyFromFile(file);
const statusTextClass = (entry: MetadataPreviewEntry): string =>
entry.status === 'error' ? 'text-destructive' : 'text-muted-foreground';
const onFileInputChange = async (event: Event): Promise<void> => {
const onFilesPicked = async (picked: File[]): Promise<void> => {
if (loadingMetadata.value) {
return;
}
const input = event.target as HTMLInputElement;
const picked = input.files ? [...input.files] : [];
resetUploadSelection();
if (picked.length === 0) {
return;
}
const { accepted, nonImageCount, oversizedImagesCount, queueOmittedImagesCount } = analyzePickedUploadFiles(picked);
const { accepted, nonImageCount, oversizedImagesCount, queueOmittedImagesCount } = analyzePickedUploadFiles(
picked,
maxImageBytes,
maxQueueSize
);
if (nonImageCount === picked.length) {
selectionError.value = 'Only image files can be added.';
@@ -130,7 +95,10 @@ const onFileInputChange = async (event: Event): Promise<void> => {
return;
}
selectionError.value = buildPickedUploadWarning({ nonImageCount, oversizedImagesCount, queueOmittedImagesCount });
selectionError.value = buildPickedUploadWarning(
{ nonImageCount, oversizedImagesCount, queueOmittedImagesCount },
maxQueueSize
);
queuedFiles.value = accepted;
selectedFile.value = accepted[0] ?? null;
@@ -151,45 +119,6 @@ const resetUploadSelection = (): void => {
clearAllPreviews();
queuedFiles.value = [];
selectedFile.value = null;
if (fileInputRef.value) {
fileInputRef.value.value = '';
}
};
const analyzePickedUploadFiles = (picked: File[]): PickedUploadAnalysis => {
const images = picked.filter(file => file.type.startsWith('image/'));
const nonImageCount = picked.length - images.length;
const imagesWithinSizeLimit = images.filter(file => file.size <= maxImageBytes);
const oversizedImagesCount = images.length - imagesWithinSizeLimit.length;
const accepted = imagesWithinSizeLimit.slice(0, maxQueueSize);
const queueOmittedImagesCount = imagesWithinSizeLimit.length - accepted.length;
return {
accepted,
nonImageCount,
oversizedImagesCount,
queueOmittedImagesCount
};
};
const buildPickedUploadWarning = (
summary: Pick<PickedUploadAnalysis, 'nonImageCount' | 'oversizedImagesCount' | 'queueOmittedImagesCount'>
): string | null => {
const parts: string[] = [];
if (summary.nonImageCount > 0) {
parts.push(`${summary.nonImageCount} non-image file(s) were skipped.`);
}
if (summary.oversizedImagesCount > 0) {
parts.push(`${summary.oversizedImagesCount} image(s) exceeded the size limit and were skipped.`);
}
if (summary.queueOmittedImagesCount > 0) {
parts.push(`Only the first ${maxQueueSize} valid images were added.`);
}
return parts.length > 0 ? parts.join(' ') : null;
dropzoneRef.value?.clearInput();
};
</script>