diff --git a/package.json b/package.json index a12e1d29486..ab6490ef625 100644 --- a/package.json +++ b/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", diff --git a/packages/forms/resources/css/components/file-upload.css b/packages/forms/resources/css/components/file-upload.css index b3cb07dfcab..9c20445a4a1 100644 --- a/packages/forms/resources/css/components/file-upload.css +++ b/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; +} diff --git a/packages/forms/resources/js/components/file-upload.js b/packages/forms/resources/js/components/file-upload.js index 145e1186294..156b1f48428 100644 --- a/packages/forms/resources/js/components/file-upload.js +++ b/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 diff --git a/packages/forms/resources/views/components/file-upload.blade.php b/packages/forms/resources/views/components/file-upload.blade.php index df9415e525b..0df2c6baade 100644 --- a/packages/forms/resources/views/components/file-upload.blade.php +++ b/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(), diff --git a/packages/forms/src/Components/BaseFileUpload.php b/packages/forms/src/Components/BaseFileUpload.php index 1208564ea25..5be76d7c381 100644 --- a/packages/forms/src/Components/BaseFileUpload.php +++ b/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); diff --git a/packages/forms/src/Components/FileUpload.php b/packages/forms/src/Components/FileUpload.php index b383ee1bff9..327f1aa5965 100644 --- a/packages/forms/src/Components/FileUpload.php +++ b/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';