Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Imaged Edit button not showing

See original GitHub issue

🐜 image edit plugin bug

Summary

Trying to use imaged-edit with another plugin than Doka, when tried to use plugin API wrapper in docs it doesn’t show the edit button that will trigger custom editor.

not sure if this

How to reproduce

 <script>
        FilePond.registerPlugin(
            FilePondPluginFileValidateType,
            FilePondPluginImageExifOrientation,
            FilePondPluginImagePreview,
            FilePondPluginImageCrop,
            FilePondPluginImageResize,
            FilePondPluginImageTransform,
            FilePondPluginImageEdit
        );
            

        const editor = {

        // Called by FilePond to edit the image
        // - should open your image editor
        // - receives file object and image edit instructions      
        open: (file, instructions) => {
            // open editor here
            console.log(file);            
        },

        // Callback set by FilePond
        // - should be called by the editor when user confirms editing
        // - should receive output object, resulting edit information
        onconfirm: (output) => {},

        // Callback set by FilePond
        // - should be called by the editor when user cancels editing
        oncancel: () => {},

        // Callback set by FilePond
        // - should be called by the editor when user closes the editor
        onclose: () => {}
        }


        FilePond.create(
        document.querySelector('input'),
        {
            labelIdle: `Drag & Drop your picture or <span class="filepond--label-action">Browse</span>`,
            imagePreviewHeight: 170,
            imageCropAspectRatio: '1:1',
            imageResizeTargetWidth: 200,
            imageResizeTargetHeight: 200,           
            styleLoadIndicatorPosition: 'center bottom',
            styleProgressIndicatorPosition: 'right bottom',
            allowImageEdit:true,
            styleImageEditButtonEditItemPosition:'	bottom center',
            imageEditAllowEdit:true,
            imageEditIconEdit:'<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 17h1.586l7-7L15.5 8.414l-7 7V17zm-1.707-2.707l8-8a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-8 8A1 1 0 0 1 10.5 19h-3a1 1 0 0 1-1-1v-3a1 1 0 0 1 .293-.707z" fill="currentColor" fill-rule="nonzero"></path></svg>',
            // Use Doka.js as image editor
            imageEditEditor:editor.open()
        }
        );
                    
        </script>

Expected behaviour

1- after upload image it will show edit button 2- clicking edit button should trigger the API wrapper editor.open() 3- after finishing eidit call editor.confirm and use callback function “output” will pass edit base64image to filepond