How to Show Notification After Image Loads in Angular Image Editor?

3 mins read

This article explains how to display a toast notification when a user uploads an image into the Angular Image Editor component using the toolbar’s browse button. This is useful for providing feedback or confirmation to users after an image is successfully loaded.

Show Notification After Image Loads in Angular Image Editor

To implement a toast notification after an image is uploaded via the toolbar browse button in the Image Editor component, you can use the toolbarCreated event to dynamically attach a beforeUpload handler to the uploader instance.

Here’s how the implementation works:

Define a beforeUpload method that triggers the toast notification using the show() method of the toast component.
Use the toolbarCreated event to access the uploader elements after the toolbar is initialized.
Inside the event handler, use a setTimeout to ensure the uploader elements are rendered before accessing them.
Query the DOM for uploader elements using querySelectorAll(‘.e-uploader.e-control’).
Loop through each uploader element and access its EJ2 instance via ej2_instances.
If the beforeUpload property is not already defined, assign the custom beforeUpload method it.

Code Example

app.component.html

<ejs-toast #defaulttoast id="defaulttoast">
     <ng-template #content>
       <div>User Interactions Successfully done</div>
     </ng-template>
   </ejs-toast>
   <ejs-imageeditor
     id="image-editor"
     (created)="created()"
     (toolbarCreated)="toolbarCreated()"
     (fileOpened)="fileOpened()"
   >
   </ejs-imageeditor>

app.component.ts

public beforeUpload = (): void => {
   console.log('beforeUpload');
   (this.toastObj as any).show();
 };
 public fileOpened = (): void => {
   setTimeout(() => {
     (this.toastObj as any).hide();
   }, 2000);
 };
 public toolbarCreated = (): void => {
   setTimeout(() => {
     let uploaders = this.imageEditor.element.querySelectorAll(
       '.e-uploader.e-control'
     );
     if (uploaders && uploaders.length > 0) {
       for (let i = 0; i < uploaders.length; i++) {
         const uploaderInstance =
           uploaders[i].ej2_instances && uploaders[i].ej2_instances[0];
         if (
           uploaderInstance &&
           typeof uploaderInstance.beforeUpload === 'undefined'
         ) {
           uploaderInstance.beforeUpload = this.beforeUpload;
         }
       }
     }
   }, 1000);
 };

Note: This approach only works when the image is uploaded via the toolbar browse button. If the image is loaded using the open method of the Image Editor, the beforeUpload event will not be triggered, and the toast notification will not appear.

Output

Live Sample

You can view a working example here:
StackBlitz Sample – Image Editor Notification

Conclusion

I hope you enjoyed learning about how to show notification after Image loads in Angular Image Editor.

You can refer to our Angular Image Editor’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our Documentation to understand how to present and manipulate data.

For current customers, you can check out our Angular components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our Angular Image Editor and other Angular components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums,Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)