remove d&d from modal and keep file list d&d

This commit is contained in:
notCharles 2025-11-03 18:28:14 -05:00
parent 57740199ce
commit f41cf67819
3 changed files with 0 additions and 85 deletions

View File

@ -549,9 +549,6 @@ class ListFiles extends ListRecords
$this->refreshPage(); $this->refreshPage();
}) })
->extraModalWindowAttributes([
'class' => '.upload-modal-window',
])
->schema([ ->schema([
Tabs::make() Tabs::make()
->contained(false) ->contained(false)

View File

@ -1,55 +1,11 @@
<div <div
x-data="{ x-data="{
isDragging: false,
dragCounter: 0,
isUploading: false, isUploading: false,
uploadQueue: [], uploadQueue: [],
currentFileIndex: 0, currentFileIndex: 0,
totalFiles: 0, totalFiles: 0,
autoCloseTimer: 1000, autoCloseTimer: 1000,
handleDragEnter(e) {
e.preventDefault();
e.stopPropagation();
this.dragCounter++;
this.isDragging = true;
},
handleDragLeave(e) {
e.preventDefault();
e.stopPropagation();
this.dragCounter--;
if (this.dragCounter === 0) this.isDragging = false;
},
handleDragOver(e) {
e.preventDefault();
e.stopPropagation();
},
async handleDrop(e) {
e.preventDefault();
e.stopPropagation();
this.isDragging = false;
this.dragCounter = 0;
const items = e.dataTransfer.items;
const files = e.dataTransfer.files;
if ((!items || items.length === 0) && (!files || files.length === 0)) return;
let filesWithPaths = [];
if (items && items.length > 0 && items[0].webkitGetAsEntry) {
filesWithPaths = await this.extractFilesFromItems(items);
}
if (files && files.length > 0 && filesWithPaths.length === 0) {
filesWithPaths = Array.from(files).map(f => ({ file: f, path: '' }));
}
if (filesWithPaths.length > 0) {
await this.uploadFilesWithFolders(filesWithPaths);
}
},
async extractFilesFromItems(items) { async extractFilesFromItems(items) {
const filesWithPaths = []; const filesWithPaths = [];
const traversePromises = []; const traversePromises = [];
@ -301,42 +257,8 @@
this.$refs.fileInput.click(); this.$refs.fileInput.click();
}, },
}" }"
@dragenter.window="handleDragEnter($event)"
@dragleave.window="handleDragLeave($event)"
@dragover.window="handleDragOver($event)"
@drop.window="handleDrop($event)"
@keydown.window="handleEscapeKey($event)"
class="relative" class="relative"
> >
<div
x-show="isDragging"
x-cloak
x-transition:enter="transition-[opacity] duration-200 ease-out"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition-[opacity] duration-150 ease-in"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/50 dark:bg-gray-100/20"
>
<div class="rounded-lg bg-white p-8 shadow-xl dark:bg-gray-800">
<div class="flex flex-col items-center gap-4">
<svg xmlns="http://www.w3.org/2000/svg"
class="size-12 text-success-500"
viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
<path d="M7 9l5 -5l5 5" />
<path d="M12 4l0 12" />
</svg>
<p class="text-lg font-semibold text-gray-900 dark:text-gray-100">
{{ trans('server/file.actions.upload.drop_files') }}
</p>
</div>
</div>
</div>
<div class="p-4"> <div class="p-4">
<input type="file" x-ref="fileInput" class="hidden" multiple @change="handleFileSelect"> <input type="file" x-ref="fileInput" class="hidden" multiple @change="handleFileSelect">

View File

@ -11,26 +11,22 @@
autoCloseTimer: 1000, autoCloseTimer: 1000,
handleDragEnter(e) { handleDragEnter(e) {
if (document.querySelector('.upload-modal-window')) return;
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
this.dragCounter++; this.dragCounter++;
this.isDragging = true; this.isDragging = true;
}, },
handleDragLeave(e) { handleDragLeave(e) {
if (document.querySelector('.upload-modal-window')) return;
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
this.dragCounter--; this.dragCounter--;
if (this.dragCounter === 0) this.isDragging = false; if (this.dragCounter === 0) this.isDragging = false;
}, },
handleDragOver(e) { handleDragOver(e) {
if (document.querySelector('.upload-modal-window')) return;
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
}, },
async handleDrop(e) { async handleDrop(e) {
if (document.querySelector('.upload-modal-window')) return;
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
this.isDragging = false; this.isDragging = false;