Spreadsheet Component, Upload to Server

[Samuel]

I am currently working on a piece where the user can Import an Excel Sheet, Modify and Validate it then Upload it to the backend service.

I have used an Upload Component to load the file into the spreadsheet and Upload when prompted by the user and this is working fine, but any modifications in the Spreadsheet Component will not be sent

I was wondering if its possible to upload the modified spreadsheet to a backend service.

You can only seem to Export it back out to a local file.

I have also tried the ProxyURL which could be a possible solution, but it navigates away from the current page and didn't seem to trigger the interceptor to add our auth headers

Is there a way to get the data behind the spreadsheet component or convert it to a base64 string, Blob or File?

 

[Vessy]

Hi Samuel,

All Kendo UI for Angular components have just representational fucntionality. Any integration with a back end service should be handled by the developer.

To upload a modified spreadsheet directly to your backend service:

1. You can access the data from the Kendo UI Spreadsheet component using the toJSON() method. This method provides the current state of the spreadsheet as a JSON object.

2. The default behavior of the Spreadsheet implies that the component does not provide a built-in mechanism for converting its data to a different type of file - binary, blob, etc.
   
   Therefore, what I would suggest would be for the developer to export the Spreadsheet data in a JSON format using the built-in methods and convert the JSON to a blob:
   
   

   private jsonToBlob(data) {
       const str = JSON.stringify(data);
       const blob = new Blob([str]);
   
       const url = URL.createObjectURL(blob);
       const downloadElem = document.getElementById('download');
       downloadElem.innerText = `Download`;
       downloadElem.setAttribute('href', url);
       downloadElem.setAttribute('download', 'data.json');
   }

   
   For further reference, I would suggest checking out the following StackOverflow thread:
   
   https://stackoverflow.com/questions/53929108/how-to-convert-a-javascript-object-to-utf-8-blob-for-download
   
   To better illustrate the suggested approach:
   
   https://stackblitz.com/edit/angular-bbuovp 
   
   

3. Use the converted base64 string or Blob to upload the file to your backend service using an HTTP request. You can include authentication headers in the request as needed.

Let us know how it goes.

Regards,

Vessy
Progress Telerik