[Bug]: file picker not found

[elmudometal]

What happened?

I have a problem when trying to add an upload files to the link I add: file_picker_types: 'file image media', file_picker_callback: (callback, value, meta) =>{ ...},

but this doesn't add the upload to the filepicker

How to reproduce the bug

php artisan vendor:publish --tag="filament-forms-tinyeditor-config"

add

'profiles' => [

    'default' => [
        'plugins' => 'advlist autoresize codesample directionality emoticons fullscreen hr image link lists media table wordcount',
        'toolbar' => 'undo redo removeformat | formatselect fontsizeselect | bold italic | rtl ltr | alignjustify alignright aligncenter alignleft | numlist bullist | forecolor backcolor | blockquote table hr | image link media codesample emoticons | wordcount fullscreen',
        'upload_directory' => null,
        'custom_configs' => [
            'file_picker_types' => 'file image media',
            'file_picker_callback' => '(callback, value, meta) =>{ ...}',
        ],
    ], ...

Package Version

1.7.4

PHP Version

8.2

Laravel Version

10.13.5

Which operating systems does with happen with?

Linux

Notes

No response

[mohamedsabil83]

I guess you have to do that in the view not the config. Check how the image processed also review the tinymce docs to confirm the right way

[elmudometal]

I was able to solve it by adding these to the view

file_picker_types: 'file media', file_picker_callback: (callback, value, meta) => { if (meta.filetype != 'image') { var input = document.createElement('input'); input.setAttribute('type', 'file');

                             input.onchange = function (event) {
                                 if (!event.target.files[0]) return
                                 $wire.upload(`componentFileAttachments.{{ $getStatePath() }}`, event.target.files[0], () => {
                                     $wire.getComponentFileAttachmentUrl('{{ $getStatePath() }}').then((url) => {
                                     console. log(url);
                                         if (!url) {
                                             failure('{{ __('Error uploading file') }}')
                                             return
                                         }
                                         callback(url)
                                     })
                                 })
                             }

                             input.click();
                         }
                     },

[elmudometal]

but it returns an error Uncaught (in promise) TypeError: o.meta is undefined in the link pluging/link js

[elmudometal]

trying to follow the way i did it this way:

`file_picker_types: 'file media', file_picker_callback: (callback, value, meta) => { if (meta.filetype != 'image') { var input = document.createElement('input'); input.setAttribute('type', 'file');

                            input.onchange = function (event) {
                                if (!event.target.files[0]) return
                                $wire.upload(`componentFileAttachments.{{ $getStatePath() }}`, event.target.files[0], () => {
                                    $wire.getComponentFileAttachmentUrl('{{ $getStatePath() }}').then((url) => {
                                    console.log(url);
                                        if (!url) {
                                            failure('{{ __('Error uploading file') }}')
                                            return
                                        }
                                        callback(url,{'meta': '', 'text':''})
                                    })
                                })
                            }

                            input.click();
                        }
                    },

`

this if you can add in the config: file_picker_types: 'file media',

This is not due to the $wire method, could it be in the view and the user activate it in the configuration, what do you think?

file_picker_callback: (callback, value, meta) => { if (meta.filetype != 'image') { var input = document.createElement('input'); input.setAttribute('type', 'file');

                            input.onchange = function (event) {
                                if (!event.target.files[0]) return
                                $wire.upload(`componentFileAttachments.{{ $getStatePath() }}`, event.target.files[0], () => {
                                    $wire.getComponentFileAttachmentUrl('{{ $getStatePath() }}').then((url) => {
                                    console.log(url);
                                        if (!url) {
                                            failure('{{ __('Error uploading file') }}')
                                            return
                                        }
                                        callback(url,{'meta': '', 'text':''})
                                    })
                                })
                            }

                            input.click();
                        }
                    }

[mohamedsabil83]

I'll try to take a look at it on the weekend