Merge pull request #13952 from filamentphp/fix/file-upload-compact-ci…

…rcle-error-messages fix: File upload compact circle error messages
filamentphp · Aug 15, 2024 · 02d2852 · 02d2852
2 parents c87823a + 747f3a9
commit 02d2852
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 66 deletions.
diff --git a/docs-assets/app/public/js/filament/forms/components/date-time-picker.js b/docs-assets/app/public/js/filament/forms/components/date-time-picker.js
diff --git a/docs-assets/app/public/js/filament/forms/components/file-upload.js b/docs-assets/app/public/js/filament/forms/components/file-upload.js
diff --git a/docs-assets/app/public/js/filament/forms/components/rich-editor.js b/docs-assets/app/public/js/filament/forms/components/rich-editor.js
diff --git a/packages/forms/dist/components/file-upload.js b/packages/forms/dist/components/file-upload.js
diff --git a/packages/forms/dist/components/rich-editor.js b/packages/forms/dist/components/rich-editor.js
diff --git a/packages/forms/resources/js/components/file-upload.js b/packages/forms/resources/js/components/file-upload.js
@@ -83,6 +83,8 @@ export default function fileUploadFormComponent({
 
         lastState: null,
 
+        error: null,
+
         uploadedFileIndex: {},
 
         isEditorOpen: false,
@@ -313,6 +315,21 @@ export default function fileUploadFormComponent({
             this.pond.on('processfileabort', handleFileProcessing)
 
             this.pond.on('processfilerevert', handleFileProcessing)
+
+            if (panelLayout === 'compact circle') {
+                // The compact circle layout does not have enough space to render an error message inside the input.
+                // As such, we need to display the error message outside of the input, using the `error` Alpine.js
+                // property that is output as a message in the field's view.
+
+                this.pond.on('error', (error) => {
+                    // FilePond has a weird English translation for the error message when a file of an unexpected
+                    // type is uploaded, for example: `File of invalid type: Expects  or image/*`. This is a
+                    // hacky workaround to fix the message to be `File of invalid type: Expects image/*`.
+                    this.error = `${error.main}: ${error.sub}`.replace('Expects  or', 'Expects')
+                })
+
+                this.pond.on('removefile', () => this.error = null)
+            }
         },
 
         destroy: function () {

diff --git a/packages/forms/resources/views/components/file-upload.blade.php b/packages/forms/resources/views/components/file-upload.blade.php
@@ -109,14 +109,11 @@
                 ->merge($getExtraAttributes(), escape: false)
                 ->merge($getExtraAlpineAttributes(), escape: false)
                 ->class([
-                    'fi-fo-file-upload flex [&_.filepond--root]:font-sans',
+                    'fi-fo-file-upload flex flex-col gap-y-2 [&_.filepond--root]:font-sans',
                     match ($alignment) {
-                        Alignment::Start => 'justify-start',
-                        Alignment::Center => 'justify-center',
-                        Alignment::End => 'justify-end',
-                        Alignment::Left => 'justify-left',
-                        Alignment::Right => 'justify-right',
-                        Alignment::Between, Alignment::Justify => 'justify-between',
+                        Alignment::Start, Alignment::Left => 'items-start',
+                        Alignment::Center => 'items-center',
+                        Alignment::End, Alignment::Right => 'items-end',
                         default => $alignment,
                     },
                 ])
@@ -142,6 +139,13 @@
             />
         </div>
 
+        <div
+            x-show="error"
+            x-text="error"
+            x-cloak
+            class="text-sm text-danger-600 dark:text-danger-400"
+        ></div>
+
         @if ($hasImageEditor && (! $isDisabled))
             <div
                 x-show="isEditorOpen"