Post
Ask Question

Implement Kendo Upload And Convert Excel Data To JSON

Introduction

 
In this article, we will discuss about how to implement Kendo upload fuctionality and how to retreive the Excel data in the form of Json.
 

Kendo UI Upload Widget

 
Kendo Upload has many features in built. Below is the kendo upload with the restriction to upload only xlsx files. Likewise we can add the file extensions separated by commas.
  1. <input type="file" id="fileUpload" name="fileUpload" />    
  2. <script type="text/javascript">    
  3.     $("#fileUpload").kendoUpload({    
  4.         validation: {    
  5.             allowedExtensions: [".xlsx"],    
  6.             maxFileSize: 900000,    
  7.         },    
  8.         multiple: false,    
  9.         select: attachClickHandler    
  10.     })    
  11.     function attachClickHandler(evt) {    
  12.         var selectedFile = evt.files[0];    
  13.         //your stuff here    
  14.         //...    
  15.         //...    
  16.     }    
  17. </script>    
 
Features in Kendo Upload
  • Kendo Upload has features to browse the file directory which is the default one by selecting the file or we can drag and drop the file.
  • Async Upload for multiple files.
  • Localization- Set Custom strings and messages for the upload process.
  • Template- Custom text whatever we give , it will replace in the place where the default file name is displayed.
  • Valiation - to restrict extensions, minimum file size, maximum file size.
  • multiple: false - we have the restriction to whether user can select multipile files for upload. By default it will be true. If we set to false, user can  select only one file.

How to convert the Excel data to Json

 
Step 1
 
Please add the below plugin which is used for the Excel conversion to json.
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.12/xlsx.full.min.js"></script>
 
Step 2
 
Please add upload control in your html file either Kendo Upload/ jquery file Upload
  1. <label for="myfile">Select a file:</label>  
  2. <input type="file" id="myfile" name="myfile"><br><br>  
  3. <p id="jsonText"></p>  
Step 3
  1. //upload change event  
  2. $("#myfile").change(function(evt){  
  3.    var file = evt.target.files[0] //retrieve the uploaded file  
  4.    fnConvertExcelToJSON(file)  
  5. })  
  6. function fnConvertExcelToJSON(file){ //method to convert excel to json  
  7.    var reader = new FileReader()  
  8.    reader.onload = function(event) {  
  9.       var data = event.target.result  
  10.       var workbook = XLSX.read(data, {  
  11.             type: 'binary'  
  12.          });  
  13.          var json_object  
  14.          workbook.SheetNames.forEach(function(sheetName) {  
  15.          var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName])  
  16.          json_object = JSON.stringify(XL_row_object)  
  17.          var jsonOutput = JSON.stringify(JSON.parse(json_object), undefined, 4);  
  18.          $('#jsonText').html(jsonOutput)  
  19.       })  
  20.    }  
  21.    reader.onerror = function(event) {  
  22.       console.error("File could not be read! Code " + event.target.error.code)  
  23.    }  
  24.    reader.readAsBinaryString(file);  
  25. }  
  26.    
The above code will give you the excel value in JSON array. Initially the uploaded file will be rendered in upload change event. Then the rendered file data will initialized to XLSX read. A Excel workbook can have multiple sheets, so loop through the sheet one by one. Using the XLSX.utils.sheet_to_row_object_array method, the excel data will be converted. 
 

Output Screenshots

 
Excel data
 
 
Upload Excel
 
Json Output 
 
 

Summary 

 
In this article, I discussed how to retreive theExcel data in the form of Json from the uploaded files.


Similar Articles