85 lines
3.6 KiB
Vue
85 lines
3.6 KiB
Vue
<template>
|
|
<div
|
|
class="relative border-3 border-dashed rounded-2xl p-8 sm:p-12 text-center transition-all duration-300 cursor-pointer group overflow-hidden"
|
|
:class="{
|
|
'border-blue-400 bg-blue-50 dark:border-blue-400 dark:bg-blue-900/40 scale-[1.02]': isDragging,
|
|
'border-gray-300 bg-gray-50/50 hover:border-blue-400 hover:bg-blue-50/80 dark:border-gray-600 dark:bg-gray-800/30 dark:hover:border-blue-400 dark:hover:bg-blue-900/30': !isDragging,
|
|
}"
|
|
@dragenter.prevent="isDragging = true"
|
|
@dragleave.prevent="isDragging = false"
|
|
@dragover.prevent
|
|
@drop.prevent="handleDrop"
|
|
@click="openFileDialog"
|
|
data-rybbit-event="file-upload-area"
|
|
>
|
|
<div class="absolute inset-0 bg-blue-400/0 group-hover:bg-blue-400/5 transition-all duration-300"></div>
|
|
|
|
<input ref="fileInput" type="file" multiple accept="image/*,.json" class="hidden" @change="handleFileChange" />
|
|
|
|
<div class="relative z-10">
|
|
<div class="mb-6 transform transition-transform duration-300" :class="isDragging ? 'scale-110' : 'group-hover:scale-105'">
|
|
<div class="w-20 h-20 sm:w-24 sm:h-24 mx-auto mb-4 bg-blue-100 dark:bg-blue-900/50 rounded-2xl flex items-center justify-center shadow-lg">
|
|
<i class="fas fa-cloud-upload-alt text-4xl sm:text-5xl text-blue-600 dark:text-blue-400"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-3">
|
|
<span v-if="isDragging">Drop your files here</span>
|
|
<span v-else>Upload Your Sprites</span>
|
|
</h3>
|
|
<p class="text-base sm:text-lg text-gray-600 dark:text-gray-300 mb-2">Drag and drop sprite images or JSON files</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-8">Supports PNG, JPG, GIF, and JSON</p>
|
|
|
|
<div class="flex items-center justify-center gap-4 mb-6">
|
|
<div class="h-px flex-1 bg-gray-300 dark:bg-gray-600"></div>
|
|
<span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">or</span>
|
|
<div class="h-px flex-1 bg-gray-300 dark:bg-gray-600"></div>
|
|
</div>
|
|
|
|
<button class="px-8 py-3.5 bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all transform hover:scale-105 flex items-center justify-center gap-3 mx-auto" data-rybbit-event="select-files">
|
|
<i class="fas fa-folder-open text-lg"></i>
|
|
<span>Browse Files</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'uploadSprites', files: File[]): void;
|
|
}>();
|
|
|
|
const fileInput = ref<HTMLInputElement | null>(null);
|
|
const isDragging = ref(false);
|
|
|
|
const openFileDialog = () => {
|
|
fileInput.value?.click();
|
|
};
|
|
|
|
const handleFileChange = (event: Event) => {
|
|
const input = event.target as HTMLInputElement;
|
|
if (input.files && input.files.length > 0) {
|
|
const files = Array.from(input.files);
|
|
emit('uploadSprites', files);
|
|
// Reset input value so uploading the same file again will trigger the event
|
|
if (fileInput.value) fileInput.value.value = '';
|
|
}
|
|
};
|
|
|
|
const handleDrop = (event: DragEvent) => {
|
|
isDragging.value = false;
|
|
|
|
if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
|
|
const files = Array.from(event.dataTransfer.files).filter(file => {
|
|
return file.type.startsWith('image/') || file.type === 'application/json' || file.name.endsWith('.json');
|
|
});
|
|
|
|
if (files.length > 0) {
|
|
emit('uploadSprites', files);
|
|
}
|
|
}
|
|
};
|
|
</script>
|