Tweak file upload layout, add filepond-plugin-media-preview, add disable preview option

package.json

@@ -25,6 +25,7 @@
         "filepond-plugin-image-preview": "^4.6.7",
         "filepond-plugin-image-resize": "^2.0.10",
         "filepond-plugin-image-transform": "^3.8.6",
+        "filepond-plugin-media-preview": "^1.0.9",
         "imask": "^6.1.0",
         "laravel-mix": "^6.0.37",
         "marked": "^4.0.10",

packages/forms/resources/css/components/file-upload.css

@@ -6,10 +6,37 @@
     @apply bg-white border border-gray-300 rounded-lg shadow-sm;
 }
 
+.filepond--drip-blob {
+    @apply bg-gray-900;
+}
+
 .dark .filepond--drop-label {
-    @apply bg-gray-700 text-gray-200 rounded-md;
+    @apply text-gray-200;
 }
 
 .dark .filepond--panel-root {
     @apply border-gray-600 text-white bg-gray-700;
 }
+
+.dark .filepond--drip-blob {
+    @apply bg-gray-100;
+}
+
+/* Compact-only styles, excluding compact circle layouts */
+
+.filepond--root[data-style-panel-layout='compact'] .filepond--item + .filepond--item {
+    @apply mt-0.5;
+}
+
+.filepond--root[data-style-panel-layout='compact'] .filepond--drop-label label {
+    @apply text-sm;
+}
+
+.filepond--root[data-style-panel-layout='compact'] .filepond--drop-label {
+    min-height: 2.625em;
+}
+
+.filepond--root[data-style-panel-layout='compact'] .filepond--file {
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+}

packages/forms/resources/js/components/file-upload.js

@@ -6,9 +6,11 @@ import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orien
 import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
 import FilePondPluginImageResize from 'filepond-plugin-image-resize'
 import FilePondPluginImageTransform from 'filepond-plugin-image-transform'
+import FilePondPluginMediaPreview from 'filepond-plugin-media-preview'
 
 import 'filepond/dist/filepond.min.css'
 import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css'
+import 'filepond-plugin-media-preview/dist/filepond-plugin-media-preview.css';
 import '../../css/components/file-upload.css'
 
 FilePond.registerPlugin(FilePondPluginFileValidateSize)
@@ -18,11 +20,13 @@ FilePond.registerPlugin(FilePondPluginImageExifOrientation)
 FilePond.registerPlugin(FilePondPluginImagePreview)
 FilePond.registerPlugin(FilePondPluginImageResize)
 FilePond.registerPlugin(FilePondPluginImageTransform)
+FilePond.registerPlugin(FilePondPluginMediaPreview)
 
 export default (Alpine) => {
     Alpine.data('fileUploadFormComponent', ({
         acceptedFileTypes,
         canReorder,
+        canPreview,
         deleteUploadedFileUsing,
         getUploadedFileUrlUsing,
         imageCropAspectRatio,
@@ -80,6 +84,9 @@ export default (Alpine) => {
                 this.pond = FilePond.create(this.$refs.input, {
                     acceptedFileTypes,
                     allowReorder: canReorder,
+                    allowImagePreview: canPreview,
+                    allowVideoPreview: canPreview,
+                    allowAudioPreview: canPreview,
                     credits: false,
                     files: shouldAppendFiles ? this.files : this.files.reverse(),
                     imageCropAspectRatio,
@@ -164,7 +171,7 @@ export default (Alpine) => {
 
                     this.pond.files = shouldAppendFiles ? files : files.reverse()
                 })
-                
+
                 this.pond.on('reorderfiles', async (files) => {
                     const orderedFileKeys = files
                         .map(file => file.source instanceof File ? file.serverId : this.uploadedFileUrlIndex[file.source] ?? null) // file.serverId is null for a file that is not yet uploaded

packages/forms/resources/views/components/file-upload.blade.php

@@ -12,6 +12,7 @@
         x-data="fileUploadFormComponent({
             acceptedFileTypes: {{ json_encode($getAcceptedFileTypes()) }},
             canReorder: {{ $canReorder() ? 'true' : 'false' }},
+            canPreview: {{ $canPreview() ? 'true' : 'false' }},
             deleteUploadedFileUsing: async (fileKey) => {
                 return await $wire.deleteUploadedFile('{{ $getStatePath() }}', fileKey)
             },
@@ -46,7 +47,7 @@
             },
         })"
         wire:ignore
-        style="min-height: 76px"
+        style="min-height: {{ $isAvatar() ? '8em' : ($getPanelLayout() === 'compact' ? '2.625em' : '4.75em') }}"
         {{ $attributes->merge($getExtraAttributes())->class([
             'filament-forms-file-upload-component',
             'w-32 mx-auto' => $isAvatar(),

packages/forms/src/Components/BaseFileUpload.php

@@ -18,6 +18,8 @@ class BaseFileUpload extends Field
 
     protected bool | Closure $canReorder = false;
 
+    protected bool | Closure $canPreview = true;
+
     protected string | Closure | null $directory = null;
 
     protected string | Closure | null $diskName = null;
@@ -149,6 +151,13 @@ public function enableReordering(bool | Closure $condition = true): static
         return $this;
     }
 
+    public function disablePreview(bool | Closure $condition = false): static
+    {
+        $this->canPreview = $condition;
+
+        return $this;
+    }
+
     public function preserveFilenames(bool | Closure $condition = true): static
     {
         $this->shouldPreserveFilenames = $condition;
@@ -243,6 +252,11 @@ public function canReorder(): bool
         return $this->evaluate($this->canReorder);
     }
 
+    public function canPreview(): bool
+    {
+        return $this->evaluate($this->canPreview);
+    }
+
     public function getAcceptedFileTypes(): ?array
     {
         $types = $this->evaluate($this->acceptedFileTypes);

packages/forms/src/Components/FileUpload.php

@@ -26,7 +26,7 @@ class FileUpload extends BaseFileUpload
 
     protected string | Closure | null $panelAspectRatio = null;
 
-    protected string | Closure | null $panelLayout = null;
+    protected string | Closure | null $panelLayout = 'compact';
 
     protected string | Closure $removeUploadedFileButtonPosition = 'left';