63 lines
2.5 KiB
Vue
63 lines
2.5 KiB
Vue
<script setup>
|
|
const upload = useUploadStore()
|
|
const isDragging = ref(false)
|
|
const fileInput = ref(null)
|
|
|
|
function onDragOver(e) { e.preventDefault(); isDragging.value = true }
|
|
function onDragLeave() { isDragging.value = false }
|
|
function onDrop(e) {
|
|
e.preventDefault()
|
|
isDragging.value = false
|
|
const file = e.dataTransfer?.files?.[0]
|
|
if (file) upload.scan(file)
|
|
}
|
|
function onFileChange(e) {
|
|
const file = e.target.files?.[0]
|
|
if (file) upload.scan(file)
|
|
}
|
|
function openFilePicker() { fileInput.value?.click() }
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full max-w-[680px] mx-auto">
|
|
<div
|
|
@dragover="onDragOver"
|
|
@dragleave="onDragLeave"
|
|
@drop="onDrop"
|
|
@click="openFilePicker"
|
|
:class="[
|
|
'bg-white border-2 border-dashed rounded-xl px-10 py-16 flex flex-col items-center gap-5 cursor-pointer transition-all duration-150',
|
|
isDragging
|
|
? 'border-[#1a56db] bg-blue-50 scale-[1.01]'
|
|
: 'border-gray-200 hover:border-[#1a56db] hover:bg-blue-50',
|
|
]"
|
|
>
|
|
<input ref="fileInput" type="file" accept=".json" class="hidden" @change="onFileChange" />
|
|
|
|
<!-- File icon -->
|
|
<svg width="64" height="64" viewBox="0 0 64 64" fill="none">
|
|
<rect x="10" y="6" width="36" height="52" rx="4" fill="#EEF3FF" stroke="#1a56db" stroke-width="2"/>
|
|
<path d="M38 6v12h12" stroke="#1a56db" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<rect x="18" y="28" width="20" height="2.5" rx="1.25" fill="#1a56db"/>
|
|
<rect x="18" y="34" width="16" height="2.5" rx="1.25" fill="#1a56db"/>
|
|
<rect x="18" y="40" width="12" height="2.5" rx="1.25" fill="#1a56db"/>
|
|
</svg>
|
|
|
|
<button
|
|
class="bg-[#1a56db] text-white text-base font-medium px-8 py-3 rounded-md hover:bg-[#1648c0] transition-colors pointer-events-none"
|
|
>
|
|
Select export file
|
|
</button>
|
|
<p class="text-xs text-gray-400">or drop idconvert_export.json here</p>
|
|
</div>
|
|
|
|
<!-- Trust line -->
|
|
<p class="text-center text-xs text-gray-400 mt-4 flex items-center justify-center gap-1.5">
|
|
<svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
|
</svg>
|
|
Run IDexport.jsx in InDesign to generate your export file · Files deleted after 1 hour
|
|
</p>
|
|
</div>
|
|
</template>
|