@opengis/cms 0.0.21 → 0.0.22

package/src/components/form-components/vs-form-media-select.vue

@@ -0,0 +1,780 @@
+<template>
+    <div 
+        v-bind="$attrs"
+        class="flex gap-4 flex-wrap"
+    >
+        <!-- Множинний режим: показуємо всі вибрані файли -->
+        <template v-if="isMultiple">
+            <div 
+                v-for="(file, index) in currentValueArray" 
+                :key="index"
+                class="relative group"
+            >
+                <img :src="getFilePreview(file)" alt="Selected File" class="w-32 h-32 object-cover rounded-lg">
+                <div
+                    class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg gap-2"
+                >
+                    <button
+                        type="button"
+                        @click="fileDelete(file, index)"
+                        class="p-2 rounded-full bg-red-500 text-white hover:bg-red-600 transition-colors"
+                    >
+                        <Trash2 class="w-4 h-4" />
+                    </button>
+                    <button
+                        type="button"
+                        @click="fileDownload(getFilePath(file))"
+                        class="p-2 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition-colors"
+                    >
+                        <Download class="w-4 h-4" />
+                    </button>
+                </div>
+                <div
+                    class="absolute bottom-full left-0 mb-2 px-3 py-1.5 bg-gray-900 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-10 max-w-[200px] truncate"
+                    :title="getFileName(file)"
+                >
+                    {{ getFileName(file) }}
+                    <div class="absolute top-full left-4 border-4 border-transparent border-t-gray-900"></div>
+                </div>
+            </div>
+        </template>
+        <!-- Одиночний режим: показуємо один файл -->
+        <div class="relative group" v-else-if="currentValue">
+            <img :src="currentValue.preview || currentValue" alt="Selected File" class="w-32 h-32 object-cover rounded-lg">
+            <div
+                class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity rounded-lg gap-2"
+            >
+            
+                <button
+                    type="button"
+                    @click="fileDelete(currentValue?.filepath || currentValue?.file_path || currentValue)"
+                    class="p-2 rounded-full bg-red-500 text-white hover:bg-red-600 transition-colors"
+                >
+                    <Trash2 class="w-4 h-4" />
+                </button>
+                <button
+                    type="button"
+                    @click="fileDownload(currentValue?.filepath || currentValue?.file_path || currentValue)"
+                    class="p-2 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition-colors"
+                >
+                    <Download class="w-4 h-4" />
+                </button>
+            </div>
+            <div
+                class="absolute bottom-full left-0 mb-2 px-3 py-1.5 bg-gray-900 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-10 max-w-[200px] truncate"
+                :title="fileName"
+            >
+                {{ fileName }}
+                <div class="absolute top-full left-4 border-4 border-transparent border-t-gray-900"></div>
+            </div>
+        </div>
+        <div
+            ref="triggerButton"
+            class="relative w-32 h-32 flex items-center justify-center border border-dotted border-gray-300 rounded-lg hover:border-blue-500 hover:bg-blue-500/10 hover:cursor-pointer transition-all"
+            :class="{ 'border-blue-500 bg-blue-500/10': isOpen, 'opacity-50 cursor-not-allowed': isUploading }"
+            @click="toggleDropdown"
+        >   
+            <Loader2 v-if="isUploading" class="w-4 h-4 animate-spin text-blue-500" />
+            <Plus v-else class="w-4 h-4" />
+            
+            <!-- Overlay лоадер -->
+            <div 
+                v-if="isUploading"
+                class="absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center rounded-lg z-10"
+            >
+                <div class="flex flex-col items-center gap-2">
+                    <Loader2 class="w-6 h-6 animate-spin text-blue-500" />
+                    <span class="text-xs text-gray-600">{{ $t("media.uploading") }}</span>
+                </div>
+            </div>
+            
+            <Teleport to="body">
+                <div v-if="isOpen" class="fixed bg-white z-50 border border-gray-200 rounded-lg shadow-lg flex flex-col items-center justify-center" :style="dropdownStyle">
+                    <div 
+                        class="relative overflow-hidden flex justify-start items-center w-full gap-2 p-4 hover:bg-blue-50 text-blue-700 border hover:border-blue-200 dark:bg-slate-700 dark:text-slate-100 hover:cursor-pointer"
+                        :class="{ 'opacity-50 cursor-not-allowed': isUploading }"
+                        @click="!isUploading && triggerFileInput()"
+                    >
+                        <input 
+                            type="file" 
+                            ref="fileInput"
+                            class="absolute justify-center bottom-0 left-0 w-full opacity-0" 
+                            @change="handleFileUpload"
+                            @click.stop
+                            :multiple="isMultiple"
+                            :disabled="isUploading"
+                        />
+                        <Loader2 v-if="isUploading" class="w-4 h-4 animate-spin" />
+                        <Download v-else />
+                        <span class="whitespace-nowrap text-sm">{{ isUploading ? $t("media.uploading") : $t("media.upload") }}</span>
+                    </div>
+                    <div 
+                        @click="isMediaSelectOpen = true"
+                        class="flex justify-start items-center w-full gap-2 p-4 hover:bg-blue-50 text-blue-700 border hover:border-blue-200 dark:bg-slate-700 dark:text-slate-100 hover:cursor-pointer"
+                    >
+                        <Image />
+                        <span class="whitespace-nowrap text-sm">{{ $t("media.selectFromMedia") }}</span>
+                    </div>
+                </div>
+            </Teleport>
+        </div>    
+       
+    </div>
+    <Teleport to="body">
+        <div 
+            v-if="isMediaSelectOpen"
+            class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+            @click="closeMediaSelect"
+        >
+            <div 
+                class="bg-white rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[90vh] flex flex-col"
+                @click.stop
+            >
+                <div class="flex items-center justify-between p-4 border-b">
+                    <h3 class="text-lg font-semibold">{{ $t('media.selectFiles') }}</h3>
+                    <button 
+                        @click="closeMediaSelect"
+                        class="text-gray-400 hover:text-gray-600"
+                    >
+                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                        </svg>
+                    </button>
+                </div>
+                <div class="flex items-center justify-between gap-4 p-4 border-b">
+                    <MediaBreadcrumb
+                        :current-path="currentPath"
+                        @navigate="navigateToFolder"
+                        @navigate-back="navigateBack"
+                    />
+                </div>
+                <div class="relative z-[1] rounded-xl text-card-foreground shadow-lg border-0 bg-white dark:bg-slate-800 backdrop-blur-sm mb-6 p-4 mx-4">
+                    <div class="flex items-center justify-between gap-4">
+                        <div class="flex items-center gap-4 flex-1">
+                            <div class="relative flex-1 max-w-md">
+                                <Search class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-slate-500" />
+                                <input 
+                                    type="text" 
+                                    :placeholder="$t('media.search')" 
+                                    class="w-full pl-10 pr-4 py-2 text-sm border border-slate-200 dark:border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-slate-700 text-slate-700 dark:text-slate-200 placeholder-slate-400 dark:placeholder-slate-500"
+                                    v-model="searchQuery"
+                                >
+                            </div>
+                            <div class="flex items-center gap-2 relative">
+                                <span class="text-xs font-bold">{{ $t("media.sortBy.title") + ': ' }}</span>
+                                <button 
+                                    ref="sortByButton"
+                                    class="relative z-[1000] inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors border shadow-sm h-8 rounded-md px-3 text-xs bg-white border-slate-300 text-slate-700
+                                    disabled:pointer-events-none disabled:opacity-50 
+                                    hover:text-accent-foreground hover:bg-slate-50
+                                    dark:bg-slate-700 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-600" 
+                                    @click="isSortByOpen = !isSortByOpen"
+                                >
+                                    <ChevronDown class="w-4 h-4" />
+                                    <span class="text-xs font-bold">{{ sortByOptions.get(sortBy) }}</span>
+                                    <div v-if="isSortByOpen" class="w-full absolute top-full left-1/2 transform -translate-x-1/2 mt-2 z-50 bg-white dark:bg-slate-700 flex flex-col items-start border border-slate-200 dark:border-slate-600 rounded-md shadow-lg">
+                                        <span class="text-left text-xs font-bold w-full p-2 hover:bg-slate-100 dark:hover:bg-slate-600 border-b border-slate-200 dark:border-slate-600 cursor-pointer" @click.stop="sorting('name')">{{ $t("media.sortBy.name") }}</span>
+                                        <span class="text-left text-xs font-bold w-full p-2 hover:bg-slate-100 dark:hover:bg-slate-600 cursor-pointer" @click.stop="sorting('filesize')">{{ $t("media.sortBy.filesize") }}</span>
+                                    </div>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="flex items-center gap-2">
+                            <button 
+                                class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 h-8 px-3 text-xs rounded-md"
+                                :class="{
+                                    'shadow bg-blue-600 hover:bg-blue-700 text-white': viewMode === 'grid',
+                                    'border shadow-sm hover:text-accent-foreground bg-white dark:bg-slate-700 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600': viewMode === 'list',
+                                }"
+                                @click="viewMode = 'grid'"
+                            >
+                                <LayoutGrid class="w-4 h-4" />
+                            </button>
+                            <button 
+                                class="inline-flex items-center justify-center whitespace-nowrap font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 h-8 px-3 text-xs rounded-md"
+                                :class="{
+                                    'shadow bg-blue-600 hover:bg-blue-700 text-white': viewMode === 'list',
+                                    'border shadow-sm hover:text-accent-foreground bg-white dark:bg-slate-700 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-600': viewMode === 'grid',
+                                }"
+                                @click="viewMode = 'list'"
+                            >
+                                <List class="w-4 h-4" />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            
+                <div class="flex flex-col gap-4 overflow-y-auto p-4 flex-1">
+                    <MediaGrid
+                        v-if="viewMode === 'grid'"
+                        :files="files"
+                        :selected-file="isMultiple ? null : selectedFile"
+                        :selected-files="isMultiple ? selectedFiles : []"
+                        @file-click="handleFileClick"
+                    />
+
+                    <MediaList
+                        v-else
+                        :files="files"
+                        :selected-file="isMultiple ? null : selectedFile"
+                        :selected-files="isMultiple ? selectedFiles : []"
+                        @file-click="handleFileClick"
+                    />
+                </div>
+               
+                <div class="p-4 border-t flex items-center justify-between">
+                    <div v-if="isMultiple && selectedFiles.length > 0" class="text-sm text-gray-600 dark:text-gray-400">
+                        {{ $t("media.selectedFiles", { count: selectedFiles.length }) }}
+                    </div>
+                    <div v-else></div>
+                    <button 
+                        @click="addFile"
+                        :disabled="isMultiple ? selectedFiles.length === 0 : !selectedFile"
+                        class="flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium disabled:pointer-events-none disabled:opacity-50 h-9 px-4 py-2 ml-auto bg-blue-600 hover:bg-blue-700 text-white shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-105"
+                    >
+                        <Plus class="w-4 h-4 mr-2" />
+                        {{ $t("common.actions.add") }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </Teleport> 
+</template>
+
+<script setup>
+    import { onMounted, watch, computed } from "vue";
+    import { Plus, Download, Image, LayoutGrid, List, Trash2, Search, ChevronDown, Loader2} from "lucide-vue-next";
+    import { ref } from "vue";
+    import MediaGrid from "../media/MediaGrid.vue";
+    import MediaList from "../media/MediaList.vue";
+    import MediaBreadcrumb from "../media/MediaBreadcrumb.vue"; 
+    import { useRoute, useRouter } from "vue-router";
+    import { useI18n } from "vue-i18n";
+
+    const { t } = useI18n();
+
+    const route = useRoute();
+    const router = useRouter();
+  
+    const modelValue = defineModel();
+    const emit = defineEmits(['change']);
+    
+    // Пропси
+    const props = defineProps({
+        multiple: {
+            type: Boolean,
+            default: false
+        },
+        multi: {
+            type: Boolean,
+            default: false
+        }
+    });
+    
+    // Computed для визначення чи multiple режим
+    const isMultiple = computed(() => props.multiple || props.multi);
+    
+    // Локальний стан для відображення, якщо modelValue не існує
+    const localValue = ref(null);
+    
+    // Computed для поточного значення
+    const currentValue = computed(() => {
+        return modelValue.value || localValue.value;
+    });
+    
+    // Computed для масиву значень (для multiple режиму)
+    const currentValueArray = computed(() => {
+        if (!isMultiple.value) return [];
+        const value = currentValue.value;
+        if (!value) return [];
+        if (Array.isArray(value)) return value;
+        // Якщо значення не масив, конвертуємо в масив
+        return [value];
+    });
+
+    // Computed для назви файлу
+    const fileName = computed(() => {
+        if (!currentValue.value) return '';
+        
+        // Якщо це об'єкт з властивостями
+        if (typeof currentValue.value === 'object') {
+            // Спочатку шукаємо саме назву файлу, а не шлях
+            return currentValue.value.filename || 
+                   currentValue.value.file_name || 
+                   currentValue.value.native_file_name || 
+                   'File';
+        }
+        
+        // Якщо це рядок (шлях до файлу), витягуємо тільки назву
+        if (typeof currentValue.value === 'string') {
+            return currentValue.value.split('/').pop() || currentValue.value;
+        }
+        
+        return 'File';
+    });
+
+    const isOpen = ref(false);
+    const isMediaSelectOpen = ref(false);
+    const viewMode = ref("grid");
+    const currentPath = ref([]);
+    const files = ref([]);
+    const pathHistory = ref([]);
+    const selectedFile = ref();
+    const selectedFiles = ref([]); // Масив вибраних файлів для multiple режиму
+    const fileInput = ref(null);
+    const isUploading = ref(false); // Стан завантаження файлів
+    const triggerButton = ref(null);
+    const sortByButton = ref(null);
+    const dropdownStyle = ref({});
+    const searchQuery = ref("");
+    const isSortByOpen = ref(false);
+    const sortBy = ref("name");
+
+    const sortByOptions = new Map([
+        ["name", t("media.sortBy.name")],
+        ["filesize", t("media.sortBy.filesize")],
+    ]);
+    
+    // Допоміжні функції для роботи з файлами
+    const getFilePath = (file) => {
+        if (typeof file === 'string') return file;
+        return file?.filepath || file?.file_path || file;
+    };
+    
+    const getFileName = (file) => {
+        if (!file) return '';
+        if (typeof file === 'string') {
+            return file.split('/').pop() || file;
+        }
+        return file.filename || file.file_name || file.native_file_name || 'File';
+    };
+    
+    const getFilePreview = (file) => {
+        if (typeof file === 'string') return file;
+        return file?.preview || `/file/resize?filepath=${getFilePath(file)}&h=137&quality=75`;
+    };
+
+    const triggerFileInput = () => {
+        if (fileInput.value) {
+            fileInput.value.click();
+        }
+    };
+
+    const toggleDropdown = () => {
+        isOpen.value = !isOpen.value;
+        if (isOpen.value) {
+            updateDropdownPosition();
+        }
+    };
+
+    const updateDropdownPosition = () => {
+        if (triggerButton.value) {
+            const rect = triggerButton.value.getBoundingClientRect();
+            dropdownStyle.value = {
+                top: `${rect.bottom + 10}px`,
+                left: `${rect.left + rect.width / 2}px`,
+                transform: 'translateX(-50%)',
+                width: '200px'
+            };
+        }
+    };
+
+    const handleFileClick = (file) => {
+        if (file.type === "dir") {
+            navigateToFolder([...currentPath.value, file.name]);
+        } else {
+            if (isMultiple.value) {
+                // Множинний вибір: додаємо/видаляємо файл з масиву
+                const index = selectedFiles.value.findIndex(f => f.id === file.id);
+                if (index >= 0) {
+                    selectedFiles.value.splice(index, 1);
+                } else {
+                    selectedFiles.value.push(file);
+                }
+            } else {
+                // Одиночний вибір
+                selectedFile.value = file.id === selectedFile.value?.id ? null : file;
+            }
+        }
+    };
+
+    const sorting = (sort) => {
+        sortBy.value = sort;
+        isSortByOpen.value = false;
+
+        files.value = files.value.sort((a, b) => {
+            if(a?.type === "dir") return -1;
+
+            if (sort === "name") {
+                return a?.name?.localeCompare(b?.name);
+            } else if (sort === "filesize") {
+                return b?.filesize - a?.filesize;
+            }
+        });
+    };
+
+    const searchFiles = async () => {
+        try {
+            const path = currentPath.value.join("/");
+            const response = await fetch(`/api/cms-media?subdir=${path}${searchQuery.value ? '&search=' + searchQuery.value : ''}`, {
+                method: "GET",
+            });
+            const data = await response.json();
+            if (data.data) {
+                files.value = data.data.map((file) => ({
+                    ...file,
+                    id: file.type === "dir" ? `dir-${file.name}` : file.id,
+                    preview: `/file/resize?filepath=${file.filepath}&h=137&quality=75`,
+                }));
+                sorting(sortBy.value);
+            } else {
+                files.value = [];
+            }
+        } catch (err) {
+            console.error("Search error:", err);
+            files.value = [];
+        }
+    };
+
+    const addFile = () => {
+        if (isMultiple.value) {
+            // Множинний режим: додаємо всі вибрані файли
+            if (selectedFiles.value.length > 0) {
+                const currentArray = Array.isArray(modelValue.value) ? [...modelValue.value] : 
+                                    (modelValue.value ? [modelValue.value] : []);
+                const currentLocalArray = Array.isArray(localValue.value) ? [...localValue.value] : 
+                                         (localValue.value ? [localValue.value] : []);
+                
+                // Додаємо нові файли
+                selectedFiles.value.forEach(file => {
+                    const filePath = file.filepath || file.file_path;
+                    // Перевіряємо чи файл вже не додано
+                    if (!currentArray.some(f => {
+                        const existingPath = typeof f === 'string' ? f : (f?.filepath || f?.file_path);
+                        return existingPath === filePath;
+                    })) {
+                        currentArray.push(filePath);
+                        currentLocalArray.push(file);
+                    }
+                });
+                
+                // Оновлюємо значення
+                if (modelValue) {
+                    modelValue.value = currentArray;
+                }
+                localValue.value = currentLocalArray;
+                
+                // Емітимо для додаткових обробників
+                emit('change', currentArray);
+                
+                // Скидаємо вибрані файли
+                selectedFiles.value = [];
+            }
+        } else {
+            // Одиночний режим
+            if (selectedFile.value) {
+                const filePath = selectedFile.value.filepath || selectedFile.value.file_path;
+                
+                // Завжди встановлюємо в modelValue, навіть якщо він null
+                if (modelValue) {
+                    modelValue.value = filePath; // Встановлюємо file_path для v-model
+                }
+                
+                // Також зберігаємо повний об'єкт для відображення
+                localValue.value = selectedFile.value;
+                
+                // Емітимо для додаткових обробників
+                emit('change', filePath);
+                
+                // Скидаємо вибраний файл
+                selectedFile.value = null;
+            }
+        }
+        closeMediaSelect();
+    };
+
+    const closeMediaSelect = () => {
+        isMediaSelectOpen.value = false;
+        // Не скидаємо selectedFile/selectedFiles при закритті, щоб зберегти вибір
+    };
+
+    const navigateToFolder = (path) => {
+        currentPath.value = path;
+        pathHistory.value = [...pathHistory.value, path];
+        selectedFile.value = null; // Скидаємо вибраний файл при навігації
+        if (isMultiple.value) {
+            selectedFiles.value = []; // Скидаємо вибрані файли при навігації
+        }
+        fetchFiles();
+    };
+
+    const navigateBack = () => {
+        if (pathHistory.value.length > 1) {
+            pathHistory.value.pop(); // Remove current path
+            currentPath.value = pathHistory.value[pathHistory.value.length - 1];
+            selectedFile.value = null; // Скидаємо вибраний файл при поверненні
+            if (isMultiple.value) {
+                selectedFiles.value = []; // Скидаємо вибрані файли при поверненні
+            }
+            fetchFiles();
+        }
+    };
+
+    const fetchFiles = async () => {
+        try {
+            const path = currentPath.value.join("/");
+            const response = await fetch(`/api/cms-media?subdir=${path}${searchQuery.value ? '&search=' + searchQuery.value : ''}`, {
+                method: "GET",
+            });
+            const data = await response.json();
+            if (data.data) {
+                files.value = data.data.map((file) => ({
+                    ...file,
+                    id: file.type === "dir" ? `dir-${file.name}` : file.id,
+                    preview: `/file/resize?filepath=${file.filepath}&h=137&quality=75`,
+                }));
+                sorting(sortBy.value);
+            } else {
+                files.value = [];
+            }
+        } catch (err) {
+            console.error("Fetch error:", err);
+            files.value = [];
+        }
+    };
+
+    const fileDelete = async (file, index) => {
+        try {
+            const filepath = typeof file === 'string' ? file : getFilePath(file);
+            await fetch(`/file/delete${filepath}`);
+            
+            if (isMultiple.value) {
+                // Множинний режим: видаляємо файл з масиву
+                const currentArray = Array.isArray(modelValue.value) ? [...modelValue.value] : [];
+                const currentLocalArray = Array.isArray(localValue.value) ? [...localValue.value] : [];
+                
+                // Видаляємо файл за індексом
+                if (index !== undefined && index >= 0) {
+                    currentArray.splice(index, 1);
+                    currentLocalArray.splice(index, 1);
+                } else {
+                    // Якщо індекс не передано, шукаємо файл за шляхом
+                    const pathIndex = currentArray.findIndex(f => {
+                        const existingPath = typeof f === 'string' ? f : (f?.filepath || f?.file_path);
+                        return existingPath === filepath;
+                    });
+                    if (pathIndex >= 0) {
+                        currentArray.splice(pathIndex, 1);
+                        currentLocalArray.splice(pathIndex, 1);
+                    }
+                }
+                
+                // Оновлюємо значення
+                if (modelValue) {
+                    modelValue.value = currentArray.length > 0 ? currentArray : null;
+                }
+                localValue.value = currentLocalArray.length > 0 ? currentLocalArray : null;
+                
+                // Емітимо подію change
+                emit('change', currentArray.length > 0 ? currentArray : null);
+            } else {
+                // Одиночний режим
+                // Очищаємо modelValue якщо він існує
+                if (modelValue) {
+                    modelValue.value = null;
+                }
+                
+                // Очищаємо localValue
+                localValue.value = null;
+                
+                // Емітимо подію change з null значенням
+                emit('change', null);
+            }
+            return true;
+        }
+        catch (error) {
+            console.error(error);
+            return false;
+        }
+    };
+
+    const fileDownload = async (filepath) => {
+        try {
+            const res = await fetch(`/file/download/files/uploads${filepath}`);
+            const buffer = await res.arrayBuffer();
+
+            const type = (res.headers)['content-type'];
+            const data = new TextDecoder('utf-8').decode(buffer);
+            const blob = new Blob([data], { type });
+            const link = document.createElement('a');
+            link.setAttribute('download', filepath);
+            link.href = window.URL.createObjectURL(blob);
+            link.click();
+        }
+        catch (error) {
+            console.error(error.message);
+        }
+    };
+
+    const handleFileUpload = async(event) => {
+        if (!event.target.files || event.target.files.length === 0) {
+            return;
+        }
+        
+        const filesToUpload = Array.from(event.target.files);
+        console.log('Uploading files:', filesToUpload);
+        
+        // Встановлюємо стан завантаження
+        isUploading.value = true;
+        
+        try {
+            const uploadedFiles = [];
+            
+            // Завантажуємо всі файли
+            for (const file of filesToUpload) {
+                // Створюємо FormData для завантаження
+                const formData = new FormData();
+                formData.append('file', file);
+                
+                // Завантажуємо файл на сервер
+                const response = await fetch('/file/upload/uploads?id=1&form=form&table=table', {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`Upload failed: ${response.status}`);
+                }
+                
+                const responseData = await response.json();
+                console.log('Upload result:', responseData);
+                
+                // API повертає структуру з result об'єктом
+                const result = responseData.result;
+                
+                // Створюємо об'єкт з результатом завантаження
+                const newFile = {
+                    file_id: result.file_id,
+                    file_name: result.file_name,
+                    file_path: result.file_path,
+                    filepath: result.file_path,  // Для сумісності
+                    format: result.format,
+                    size: result.size,
+                    entity_id: result.entity_id,
+                    dir: result.dir,
+                    native_file_name: result.native_file_name,
+                    preview: `/file/resize?filepath=${result.file_path}&h=137&quality=75`
+                };
+                
+                uploadedFiles.push(newFile);
+            }
+            
+            if (isMultiple.value) {
+                // Множинний режим: додаємо всі завантажені файли до масиву
+                const currentArray = Array.isArray(modelValue.value) ? [...modelValue.value] : 
+                                    (modelValue.value ? [modelValue.value] : []);
+                const currentLocalArray = Array.isArray(localValue.value) ? [...localValue.value] : 
+                                         (localValue.value ? [localValue.value] : []);
+                
+                uploadedFiles.forEach(newFile => {
+                    currentArray.push(newFile.file_path);
+                    currentLocalArray.push(newFile);
+                });
+                
+                // Оновлюємо значення
+                if (modelValue) {
+                    modelValue.value = currentArray;
+                }
+                localValue.value = currentLocalArray;
+                
+                // Емітимо для додаткових обробників
+                emit('change', currentArray);
+            } else {
+                // Одиночний режим: використовуємо тільки перший файл
+                const newFile = uploadedFiles[0];
+                
+                // Завжди встановлюємо в modelValue, навіть якщо він null
+                if (modelValue) {
+                    modelValue.value = newFile.file_path; // Встановлюємо file_path для v-model
+                }
+                
+                // Також зберігаємо повний об'єкт для відображення
+                localValue.value = newFile;
+                
+                // Емітимо для додаткових обробників
+                emit('change', newFile.file_path);
+            }
+            
+            isOpen.value = false; // Закриваємо меню після завантаження
+            
+        } catch (error) {
+            console.error('Upload error:', error);
+            alert('Помилка завантаження файлу: ' + error.message);
+        } finally {
+            // Скидаємо стан завантаження
+            isUploading.value = false;
+        }
+        
+        // Очищаємо input
+        event.target.value = '';
+    };
+    watch(isMediaSelectOpen, (n) => {
+        if (n) {
+            fetchFiles();
+        }
+    });
+
+    watch(currentPath, (n) => {
+        if (n.length > 0) {
+            router.push({ query: { path: n.join("/") } });
+        } else {
+            router.push({ query: { path: undefined } });
+        }
+    });
+
+    let searchTimeout;
+    watch(searchQuery, (val) => {
+        clearTimeout(searchTimeout);
+        searchTimeout = setTimeout(() => {
+            searchFiles();
+        }, 500);
+    });
+
+    // Скидаємо selectedFile коли modelValue змінюється ззовні
+    watch(modelValue, (newValue) => {
+        if (newValue && typeof newValue === 'object') {
+            const currentPath = selectedFile.value?.filepath || selectedFile.value?.file_path;
+            if (newValue.filepath !== currentPath && newValue.file_path !== currentPath) {
+                selectedFile.value = null;
+            }
+        } else if (newValue && typeof newValue === 'string') {
+            const currentPath = selectedFile.value?.filepath || selectedFile.value?.file_path;
+            if (newValue !== currentPath) {
+                selectedFile.value = null;
+            }
+        }
+    });
+
+
+    onMounted(() => {
+        currentPath.value = route.query?.path?.split("/") || [];
+        pathHistory.value = [[]]; // Initialize with root path
+        
+        // Ініціалізуємо selectedFile якщо modelValue порожній
+        if (!modelValue.value) {
+            selectedFile.value = null;
+        }
+
+        // Додаємо обробник кліків поза dropdown
+        const handleClickOutside = (e) => {
+            if (isOpen.value && !triggerButton.value?.contains(e.target)) {
+                isOpen.value = false;
+            }
+            // Закриваємо dropdown сортування при кліку поза ним
+            if (isSortByOpen.value && sortByButton.value && !sortByButton.value.contains(e.target)) {
+                isSortByOpen.value = false;
+            }
+        };
+        document.addEventListener('click', handleClickOutside);
+    });
+</script>