How to upload Image file using material design in angular 11

[Ishan Shah]

Hello!

I am newer to angular. I want to perform crud operation of image file upload using material design, so please help me with proper examples and explanations of angular 11.

[Sureshkumar P]

Hi Ishan, 

 

Greetings from Syncfusion support.  

 

Yes, we can able to process the Crud operations (save and delete) in our file uploader component using asyncSettings property.  

 

Kindly refer the below code example. 

[app.component.html] 

<ejs-uploader #defaultupload id='defaultfileupload' [asyncSettings]='path' [dropArea]='dropElement' 

                (removing)='onFileRemove($event)'></ejs-uploader> 

 

[app.component.ts] 

 

public path: Object = { 

        saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save', 

        removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove' 

    }; 

 

 

We have created a sample based on your requirement. please check the sample here: https://stackblitz.com/edit/angular-phmpr4-kurtfk?file=app.component.ts  

 

To know more about asyncSettings property, please refer the below API documentation link: https://ej2.syncfusion.com/angular/documentation/api/uploader/#asyncsettings  

 

If we misunderstood your requirement, please explain the requirement with detailed explanation with below details. 

1.     If possible, please share your exact requirement with image or video representations. 

2.     Please share you have used file uploader control individually or inside any other control like file manager, grid.  

Regards, 

Sureshkumar P