How to hide browse icon in toolbar

[Jomphod thammasarn]

I wanna hide browse at first

This is setup config 

browse is a defualt menu config ? I got alternative way with style display hide but I don't wanna do that way.

[Keerthikaran Venkatachalam]

Hi Jomphod,

We checked the reported query, and by adding the “e-hidden” class to the uploader toolbar item using the toolbarCreated event, you can achieve your requirements. Please refer to the below code snippet and sample.

    <ejs-imageeditor id="image-editor" [toolbar]="customToolbar" (toolbarCreated)="toolbarCreated()" (created)="created()">

    </ejs-imageeditor>

….

    public toolbarCreated = (): void => {

        let uploadElem: Element = document.querySelector('.e-toolbar-item.e-image-upload');

        if (uploadElem) {

        uploadElem.classList.add('e-hidden');

        }

    }

Sample link: https://stackblitz.com/edit/angular-5vx8yv-dmao5n?file=src%2Fapp.component.ts

However, we have considered your requirement as an improvement “Hide uploader toolbar item in Image Editor" and logged an improvement report for it. We will include the fix for this issue in the upcoming Volume 4 SP release scheduled for the last week of January 2024.

Feedback: https://www.syncfusion.com/feedback/47341/hide-uploader-toolbar-item-in-image-editor

You will be informed regarding this once the improvement is published. We appreciate your patience until then.

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

[Keerthikaran Venkatachalam]

Hi Jomphod,

We are glad to announce that our Essential Studio 2023 Volume 4 SP Release V24.2.3 is rolled out and is available for download under the following link.

Essential Studio 2023 Volume 4 Service Pack Release v24.2.3 is available for download | Announcements Forums | Syncfusion  

We have provided the “Hide uploader toolbar item in Image Editor” in our latest version (24.2.3). So kindly update your Syncfusion packages to latest version (24.2.3).

Please refer to the following code snippet.

<ejs-imageeditor id="image-editor" [toolbar]="customToolbar" (toolbarUpdating)="toolbarUpdating($event)" (created)="created()">

    </ejs-imageeditor>

…

public toolbarUpdating = (args): void => {

        for (var i = 0; i < args.toolbarItems.length; i++) {

            if (args.toolbarItems[i].id.split('_')[1] === 'upload') {

                args.toolbarItems[i].visible = false;

                break;

            }

        }

    }

Sample link: https://stackblitz.com/edit/angular-5vx8yv-tfsbkg?file=src%2Fapp.component.ts

Package link: https://www.npmjs.com/package/@syncfusion/ej2-angular-image-editor

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,

KeerthiKaran K V