From e82034291b9cf9249aa713e4a887b59a563494fe Mon Sep 17 00:00:00 2001
From: Charles <charles@pelican.dev>
Date: Mon, 5 May 2025 13:20:39 -0400
Subject: [PATCH] unable to see dropped event....

---
 .../FileResource/Pages/ListFiles.php          |  30 ++++
 .../filament/pages/upload-drop-zone.blade.php | 132 ++++++++++++++++++
 2 files changed, 162 insertions(+)
 create mode 100644 resources/views/filament/pages/upload-drop-zone.blade.php

diff --git a/app/Filament/Server/Resources/FileResource/Pages/ListFiles.php b/app/Filament/Server/Resources/FileResource/Pages/ListFiles.php
index 5992f31a7..07ebfab6f 100644
--- a/app/Filament/Server/Resources/FileResource/Pages/ListFiles.php
+++ b/app/Filament/Server/Resources/FileResource/Pages/ListFiles.php
@@ -21,7 +21,9 @@ use Filament\Forms\Components\Select;
 use Filament\Forms\Components\Tabs;
 use Filament\Forms\Components\Tabs\Tab;
 use Filament\Forms\Components\TextInput;
+use Filament\Forms\Form;
 use Filament\Forms\Get;
+use Filament\Infolists\Concerns\InteractsWithInfolists;
 use Filament\Notifications\Notification;
 use Filament\Panel;
 use Filament\Resources\Pages\ListRecords;
@@ -54,6 +56,12 @@ class ListFiles extends ListRecords
     {
         parent::mount();
 
+        // Inject the Blade view for drag-and-drop upload
+        Filament::registerRenderHook(
+            'panels::body.end',
+            fn (): string => view('filament.pages.upload-drop-zone')->render()
+        );
+
         $this->path = $path ?? '/';
     }
 
@@ -561,4 +569,26 @@ class ListFiles extends ListRecords
                 ->where('path', '.*'),
         );
     }
+
+    public function getFooter(): ?\Illuminate\Contracts\View\View
+    {
+        return view('filament.pages.upload-drop-zone');
+    }
+
+    public function form(Form $form): Form
+    {
+        /** @var Server $server */
+        $server = Filament::getTenant();
+
+        return $form
+            ->schema([
+                FileUpload::make('files')
+                    ->id('hidden-uploader')
+                    ->storeFiles(false)
+                    ->previewable(false)
+                    ->preserveFilenames()
+                    ->multiple()
+                    ->maxSize((int) round($server->node->upload_size * (config('panel.use_binary_prefix') ? 1.048576 * 1024 : 1000))),
+            ]);
+    }
 }
diff --git a/resources/views/filament/pages/upload-drop-zone.blade.php b/resources/views/filament/pages/upload-drop-zone.blade.php
new file mode 100644
index 000000000..b9d48f43d
--- /dev/null
+++ b/resources/views/filament/pages/upload-drop-zone.blade.php
@@ -0,0 +1,132 @@
+{{-- Upload Progress Popup --}}
+<div id="upload-status-popup"
+     class="hidden fixed bottom-4 right-4 bg-white shadow-xl border border-gray-300 rounded-xl p-4 w-72 z-50">
+    <h3 class="font-semibold mb-2 text-gray-700">Uploading...</h3>
+    <div id="upload-progress-list" class="space-y-2 text-sm text-gray-600"></div>
+</div>
+
+{{-- Hidden File Input for FilePond --}}
+<input type="file" id="hidden-uploader" name="files[]" multiple>
+
+@push('scripts')
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/filepond/4.32.7/filepond.min.js" integrity="sha512-/kcyaB84QgojPP9E91b3lmeLZXKMG6wGqIGaTIld4RtbyTBFB0DHBSL7/WPwU/fAftwmpvYYvdq/S96smP8Ppw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/filepond/4.32.7/filepond.min.css" integrity="sha512-FJiY0+cfDomcgiTe/XuOgtE7QW6R0NGnCDonCOgVztYK7+USa0Y5a3LoUcXUhfCjDq9oJ91hqyThq2eN69OZBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const popup = document.getElementById('upload-status-popup');
+            const progressList = document.getElementById('upload-progress-list');
+            const fileInput = document.getElementById('hidden-uploader');
+
+            // Initialize FilePond
+            const pond = FilePond.create(fileInput, {
+                credits: false,
+                allowMultiple: true,
+                dropOnPage: true,  // Enable drop anywhere on the page
+                dropValidation: true,
+                server: {
+                    process: {
+                        url: '/upload',
+                        method: 'POST',
+                        load: (response) => {
+                            console.log('File uploaded successfully:', response);
+                            return response;
+                        },
+                        onerror: (error) => {
+                            console.error('Error uploading file:', error);
+                            return error;
+                        }
+                    }
+                },
+                onaddfilestart: (file) => {
+                    showPopup();
+                    addProgressItem(file);
+                },
+                onprocessfileprogress: (file, progress) => {
+                    updateProgressItem(file, progress);
+                },
+                onprocessfile: (file) => {
+                    updateProgressItem(file, 1);
+                },
+                onprocessfiles: () => {
+                    setTimeout(hidePopup, 1500);
+                }
+            });
+
+            // Handle dragover on the entire page (prevents default behavior)
+            document.body.addEventListener('dragover', (e) => {
+                e.preventDefault();  // Prevent default behavior to allow drop
+                console.log("dragover event triggered");  // Debugging
+                document.body.classList.add('ring-2', 'ring-blue-500', 'bg-blue-50');  // Optional: visual feedback
+            });
+
+            // Handle dragleave event
+            document.body.addEventListener('dragleave', () => {
+                document.body.classList.remove('ring-2', 'ring-blue-500', 'bg-blue-50');
+            });
+
+            // Handle drop event on the entire page (ensure default behavior is prevented)
+            document.body.addEventListener('drop', (e) => {
+                e.preventDefault();  // Prevent the default drop behavior
+                console.log("drop event triggered");  // Debugging
+
+                document.body.classList.remove('ring-2', 'ring-blue-500', 'bg-blue-50');
+
+                // Get dropped files
+                const files = Array.from(e.dataTransfer.files || []);  // Convert FileList to an array
+                console.log('Dropped files:', files);  // Debugging
+
+                // Ensure there are files to add
+                if (files.length > 0) {
+                    // Add files to FilePond
+                    pond.addFiles(files).then(() => {
+                        console.log('Files successfully added to FilePond');
+                    }).catch((error) => {
+                        console.error('Error adding files to FilePond:', error);
+                    });
+                } else {
+                    console.warn('No files dropped');
+                }
+            });
+
+            // Show the upload progress popup
+            function showPopup() {
+                popup.classList.remove('hidden');
+            }
+
+            // Hide the upload progress popup
+            function hidePopup() {
+                popup.classList.add('hidden');
+                progressList.innerHTML = '';
+            }
+
+            // Add a new progress item to the list
+            function addProgressItem(file) {
+                const id = file.id;
+                const div = document.createElement('div');
+                div.id = `progress-${id}`;
+                div.innerHTML = `
+                    <div class="flex justify-between">
+                        <span class="truncate w-40">${file.filename}</span>
+                        <span class="upload-progress">0%</span>
+                    </div>
+                    <div class="h-1 bg-gray-200 rounded">
+                        <div class="h-1 bg-blue-500 rounded progress-bar" style="width: 0%"></div>
+                    </div>
+                `;
+                progressList.appendChild(div);
+            }
+
+            // Update the progress of a file
+            function updateProgressItem(file, progress) {
+                const id = file.id;
+                const el = document.getElementById(`progress-${id}`);
+                if (el) {
+                    const percent = Math.round(progress * 100);
+                    el.querySelector('.upload-progress').textContent = `${percent}%`;
+                    el.querySelector('.progress-bar').style.width = `${percent}%`;
+                }
+            }
+        });
+    </script>
+@endpush