Callback after Upload

[vin]

My scenario is, i need to Upload ONLY excel file (1 file at a time)

I need to throw error if it is NOT excel file

I can browse or drop the file and validate if it is Excel

I need to Upload to a WebAPI endpoint
In the WebAPI i need to read the excel file and send back the formatted data in JSON format as response

I need to read the response data in a callback after upload is successful

I need to display the data in a grid after reading the json data in UI

[Sureshkumar P]

Hi Vin, 

 

Greetings from Syncfusion support.  

 

Yes, you can restrict the uploading file type using allowedExtensions property in our file uploader component. Also, you can get the successfully uploaded file details in our success event argument.  

 

Kindly refer the below screen shot. 

 

 

 

We have prepared the sample based on your requirement. please find the sample here: https://stackblitz.com/edit/angular-7v8pmu-hs13wt?file=app.component.html  

 

To know more about allowedExtensions and success event. Please refer the below API documentation links. 

 

Property : https://ej2.syncfusion.com/angular/documentation/api/uploader/#allowedextensions  

 

Event: https://ej2.syncfusion.com/angular/documentation/api/uploader/#success  

 

Could you please check the above sample and let us know whether this is fulfilling your requirement or get back to us if you need further assistance. 

1.     Whether you can use the uploader component inside the grid component or not? 

2.     In which details you wat to get back after successfully uploaded the files with json format. 

3.     What data you want to load the grid component based on uploaded files.  

 

These details will help us to provide exact solution as earlier as possible.  

 

Regards, 

Sureshkumar P 

[vin]

Hi

What i did is, after uploading i load it to grid in the UI itself without loading the file to server.
i got the sample from forum
https://www.syncfusion.com/forums/147826/how-to-import-excel-data-to-angular-grid
 https://stackblitz.com/edit/angular-ohqou2-bkzyec?file=default.component.ts

My Q is , is there a way to handle the CLEAR and UPLOAD buttons of Upload
I want to send the grid data to my API when UPLOAD is clicked and clear the grid data when CLEAR button is clicked. Right now clear is working by default to clear the file.

[Prasanna Kumar Viswanathan]

Hi Vin, 

 

Thanks for the update. 

 

Based on your query you need to handle the clear and upload buttons of Upload Component. Before we proceed with your query, we need the following details, 

 

1. In this you have mentioned that you need to send the grid data to the API when upload is clicked. So, please confirm which grid data is need to send to the API? 

 

2. Share the pictorial or video demonstration of your requirement. 

 

3. Syncfusion Package Version. 

 

Regards, 

Prasanna Kumar N.S.V 

[vin]

Hi Prasanna

I am reading the uploaded file in the client side and loading the data in a grid

I just need a handle on upload and clear buttons

Thanks

[Ajith Govarthan]

Hi Vin, 

Thanks for the update. 

Based on your shared information, we suspect that you want the event handler when click the upload and clear button. Uploading and clearing event triggers when clicking upload and clear button click.   

  

To know more about uploading and clearing event please refer the below documentation link.  

  

Uploading event: https://ej2.syncfusion.com/angular/documentation/api/uploader/#uploading   

  

Clearing event: https://ej2.syncfusion.com/angular/documentation/api/uploader/#clearing    

  

Regards,  

Ajith G.