Search code examples
javascripttinymcetinymce-4tinymce-plugins

Tinymce adding file picker button for adding links

I wanted to add a trigger button to upload image as a data. So I added the following piece of code

<textarea id="test"></textarea>
<input name="image" type="file" id="test-upload" class="hidden" onchange="">

tinymce.init({
            selector: '#test',
            ...,
            paste_data_images: true,
            image_advtab: true,
            file_picker_callback: function(callback, value, meta) {
                if (meta.filetype == 'image') {
                    jQuery('#test-upload').trigger('click');
                    jQuery('#test-upload').on('change', function() {
                        var file = this.files[0];
                        var reader = new FileReader();
                        reader.onload = function(e: any) {
                            callback(e.target.result, {
                                alt: ''
                            });
                        };
                        reader.readAsDataURL(file);
                    });
                }
            },
            ...
        });

This is working as expected. I am getting a file picker for the image as below

enter image description here

But I am also getting this file picker when I try to add link as well. enter image description here

How to avoid this?

Solution

  • Add the file_picker_types setting to your configuration and specify where the picker should be used.

    https://www.tinymce.com/docs/configure/file-image-upload/#file_picker_types

    The default is: 

    file_picker_types: 'file image media'

    ...but you can change it to:

    file_picker_types: 'image media'

    ...at which point the picker won't appear for files (links).