search

filamentphp / filament

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
https://filamentphp.com
MIT License
19.21k stars 2.96k forks source link

File upload field throws error due to `pond` being undefinied #1752

Closed oddvalue closed 2 years ago

oddvalue commented 2 years ago

Package

filament/forms

Package Version

v2.10.16

Laravel Version

v8.83.2

Livewire Version

v2.10.4

PHP Version

8.1.2

Bug description

File upload field throws error due to pond being undefined. This only started happening today, the app I've been working on was working fine with the upload fields.

Steps to reproduce

This bare install of Laravel with Filament Forms shows the error:

https://github.com/oddvalue/filament-upload-test

Relevant log output

app.js?id=85b923f392758842fa9df0c49a97d1b3:3567 Uncaught (in promise) TypeError: Cannot convert undefined or null to object
    at Function.entries (<anonymous>)
    at Proxy._callee6$ (app.js?id=85b923f392758842fa9df0c49a97d1b3:3567:2143)
    at tryCatch (app.js?id=85b923f392758842fa9df0c49a97d1b3:3691:40)
    at Generator.invoke [as _invoke] (app.js?id=85b923f392758842fa9df0c49a97d1b3:3922:22)
    at Generator.next (app.js?id=85b923f392758842fa9df0c49a97d1b3:3747:21)
    at asyncGeneratorStep (app.js?id=85b923f392758842fa9df0c49a97d1b3:3511:3740)
    at _next (app.js?id=85b923f392758842fa9df0c49a97d1b3:3511:4054)
    at app.js?id=85b923f392758842fa9df0c49a97d1b3:3511:4206
    at new Promise (<anonymous>)
    at Proxy.<anonymous> (app.js?id=85b923f392758842fa9df0c49a97d1b3:3511:3967)
_callee6$ @ app.js?id=85b923f392758842fa9df0c49a97d1b3:3567
tryCatch @ app.js?id=85b923f392758842fa9df0c49a97d1b3:3691
invoke @ app.js?id=85b923f392758842fa9df0c49a97d1b3:3922
(anonymous) @ app.js?id=85b923f392758842fa9df0c49a97d1b3:3747
asyncGeneratorStep @ app.js?id=85b923f392758842fa9df0c49a97d1b3:3511
_next @ app.js?id=85b923f392758842fa9df0c49a97d1b3:3511
(anonymous) @ app.js?id=85b923f392758842fa9df0c49a97d1b3:3511
(anonymous) @ app.js?id=85b923f392758842fa9df0c49a97d1b3:3511
init @ app.js?id=85b923f392758842fa9df0c49a97d1b3:3567
(anonymous) @ app.js?id=85b923f392758842fa9df0c49a97d1b3:1713
evaluate @ app.js?id=85b923f392758842fa9df0c49a97d1b3:1690
(anonymous) @ app.js?id=85b923f392758842fa9df0c49a97d1b3:3180
(anonymous) @ app.js?id=85b923f392758842fa9df0c49a97d1b3:2397
flushHandlers @ app.js?id=85b923f392758842fa9df0c49a97d1b3:1802
stopDeferring @ app.js?id=85b923f392758842fa9df0c49a97d1b3:1807
deferHandlingDirectives @ app.js?id=85b923f392758842fa9df0c49a97d1b3:1810
initTree @ app.js?id=85b923f392758842fa9df0c49a97d1b3:2009
(anonymous) @ app.js?id=85b923f392758842fa9df0c49a97d1b3:1969
start @ app.js?id=85b923f392758842fa9df0c49a97d1b3:1968
./resources/js/app.js @ app.js?id=85b923f392758842fa9df0c49a97d1b3:3484
__webpack_require__ @ app.js?id=85b923f392758842fa9df0c49a97d1b3:4407
(anonymous) @ app.js?id=85b923f392758842fa9df0c49a97d1b3:4565
__webpack_require__.O @ app.js?id=85b923f392758842fa9df0c49a97d1b3:4446
(anonymous) @ app.js?id=85b923f392758842fa9df0c49a97d1b3:4567
(anonymous) @ app.js?id=85b923f392758842fa9df0c49a97d1b3:4569
app.js?id=85b923f392758842fa9df0c49a97d1b3:1679 Alpine Expression Error: Cannot read properties of null (reading 'setOptions')

Expression: "pond.setOptions($event.detail)"

 <div x-data=​"fileUploadFormComponent({
            acceptedFileTypes:​ null,
            canReorder:​ false,
            canPreview:​ true,
            deleteUploadedFileUsing:​ async (fileKey)​ => {
                return await $wire.deleteUploadedFile('file', fileKey)​
            }​,
            getUploadedFileUrlUsing:​ async (fileKey)​ => {
                return await $wire.getUploadedFileUrl('file', fileKey)​
            }​,
            imageCropAspectRatio:​ null,
            imagePreviewHeight:​ null,
            imageResizeTargetHeight:​ null,
            imageResizeTargetWidth:​ null,
            loadingIndicatorPosition:​ 'right',
            panelAspectRatio:​ null,
            panelLayout:​ 'compact',
            placeholder:​ null,
            maxSize:​ null,
            minSize:​ null,
            removeUploadedFileUsing:​ async (fileKey)​ => {
                return await $wire.removeUploadedFile('file', fileKey)​
            }​,
            removeUploadedFileButtonPosition:​ 'left',
            reorderUploadedFilesUsing:​ async (files)​ => {
                return await $wire.reorderUploadedFiles('file', files)​
            }​,
            shouldAppendFiles:​ false,
            state:​ $wire.entangle('file')​.defer,
            uploadButtonPosition:​ 'right',
            uploadProgressIndicatorPosition:​ 'right',
            uploadUsing:​ async (fileKey, file, success, error, progress)​ => {
                $wire.upload(`file.${fileKey}​`, file, ()​ => {
                    success(fileKey)​
                }​, error, progress)​
            }​,
        }​)​" x-on:filepond-locale-updated.window=​"pond.setOptions($event.detail)​" wire:ignore style=​"min-height:​ 2.625em" class=​"filament-forms-file-upload-component">​…​</div>​
handleError @ app.js?id=85b923f392758842fa9df0c49a97d1b3:1679
(anonymous) @ app.js?id=85b923f392758842fa9df0c49a97d1b3:1745
Promise.catch (async)
(anonymous) @ app.js?id=85b923f392758842fa9df0c49a97d1b3:1745
tryCatch @ app.js?id=85b923f392758842fa9df0c49a97d1b3:1672
(anonymous) @ app.js?id=85b923f392758842fa9df0c49a97d1b3:3452
handler3 @ app.js?id=85b923f392758842fa9df0c49a97d1b3:2864
(anonymous) @ app.js?id=85b923f392758842fa9df0c49a97d1b3:2911
(anonymous) @ app.js?id=85b923f392758842fa9df0c49a97d1b3:2866
(anonymous) @ (index):96
app.js?id=85b923f392758842fa9df0c49a97d1b3:1683 Uncaught TypeError: Cannot read properties of null (reading 'setOptions')
    at eval (eval at safeAsyncFunction (app.js?id=85b923f392758842fa9df0c49a97d1b3:1727:14), <anonymous>:3:37)
    at app.js?id=85b923f392758842fa9df0c49a97d1b3:1745:21
    at tryCatch (app.js?id=85b923f392758842fa9df0c49a97d1b3:1672:12)
    at app.js?id=85b923f392758842fa9df0c49a97d1b3:3452:5
    at handler3 (app.js?id=85b923f392758842fa9df0c49a97d1b3:2864:25)
    at app.js?id=85b923f392758842fa9df0c49a97d1b3:2911:5
    at app.js?id=85b923f392758842fa9df0c49a97d1b3:2866:52
    at (index):96:20
eval @ VM3051:3
(anonymous) @ app.js?id=85b923f392758842fa9df0c49a97d1b3:1745
tryCatch @ app.js?id=85b923f392758842fa9df0c49a97d1b3:1672
(anonymous) @ app.js?id=85b923f392758842fa9df0c49a97d1b3:3452
handler3 @ app.js?id=85b923f392758842fa9df0c49a97d1b3:2864
(anonymous) @ app.js?id=85b923f392758842fa9df0c49a97d1b3:2911
(anonymous) @ app.js?id=85b923f392758842fa9df0c49a97d1b3:2866
(anonymous) @ (index):96
setTimeout (async)
handleError @ app.js?id=85b923f392758842fa9df0c49a97d1b3:1682
(anonymous) @ app.js?id=85b923f392758842fa9df0c49a97d1b3:1745
Promise.catch (async)
(anonymous) @ app.js?id=85b923f392758842fa9df0c49a97d1b3:1745
tryCatch @ app.js?id=85b923f392758842fa9df0c49a97d1b3:1672
(anonymous) @ app.js?id=85b923f392758842fa9df0c49a97d1b3:3452
handler3 @ app.js?id=85b923f392758842fa9df0c49a97d1b3:2864
(anonymous) @ app.js?id=85b923f392758842fa9df0c49a97d1b3:2911
(anonymous) @ app.js?id=85b923f392758842fa9df0c49a97d1b3:2866
(anonymous) @ (index):96
danharrin commented 2 years ago

You need to call $this->form->fill() in mount() to initialise the form, as mentioned here.

oddvalue commented 2 years ago

@danharrin thanks. I'm still getting the error, though. See updates to example app: https://github.com/oddvalue/filament-upload-test There's definitely something up with the filepond field, the styling doesn't look right on it. The images don't have any padding and the .file-list element drops below the container.

I don't see these issues on the filepond website examples. Are you able to replicate this?

image image

danharrin commented 2 years ago

Yeah, I can replicate this. The reason why the file upload looks different is because we use "compact" mode by default in FilePond, which removes unnecessary padding. You can change this using ->panelLayout(null).

The exception in the console - I can confirm this is a bug introduced in #1689, but it shouldn't actually impact the file upload functioning.

danharrin commented 2 years ago

@dmandrade do you know why the FilePond locale event is firing before the component is initialised? Any way to fix it?

dmandrade commented 2 years ago

@danharrin @oddvalue I suspect the problem is due to the order of scripts call.

@stack('scripts') in /resources/views/layouts/app.blade.php .is is called in the head right after app.js but app.js is deferred.

Try to put scripts before body close

        <!-- Scripts -->
        @livewireScripts
        <script src="{{ mix('js/app.js') }}"></script>
        @stack('scripts')`

I will do a PR do put a defer in filepond locale and check if pond exists before call setOptions()

oddvalue commented 2 years ago

@dmandrade moving the scripts to body close or removing defer from app.js doesn't appear to remove the error.

@danharrin thanks for the tip regarding the panellayout thing, the main reason I mentioned it was that the element dropping below the field will overlap any field under it. I've added a checkbox to the test repo if you want to see for yourself: https://github.com/oddvalue/filament-upload-test The element appears above the checkbox and you can't click it. Can confirm that ->panelLayout(null) fixes the issue, though.

dmandrade commented 2 years ago

@oddvalue Did you remove the "defer" tag from the script?

oddvalue commented 2 years ago

@dmandrade I did, same error unfortunately

dmandrade commented 2 years ago

PR #1787 check if filepond exists to prevent console warning.

@danharrin Can you check PR?

danharrin commented 2 years ago

Great, thanks.