To upload csv data as ADP(Array data provider) or array

by

Steps to upload csv data as ADP(Array data provider) or array

  • Add a file component
  • On file select call the below JavaScript function and pass file as parameter
  • Assign the result from below function to ADP.data or Array

JavaScript function 

PageModule.prototype.getRowsFromCsv = function (file) {
  return new Promise((resolve) => {
    try {
      let fileContent = [];
      const fileReader = new FileReader();
      fileReader.readAsText(file);
      fileReader.onload = (e) => {
        let result = e.target.result;
        let columns = ['employee','name','phone','salary'];
        let size;
        let inputData = [];
        if (result) {
          let lines = result.split("\n");
          for ( let  i = 1 ; i < lines.length ; i++ ) {
            let row = lines[i];
            let rowArray = row.split(",");
            let inputObj = {} ;
            inputObj.employee = rowArray[0];
            inputObj.name = rowArray[1];
            inputObj.phone = rowArray[2];
            inputObj.salary= rowArray[3];
            inputData.push(inputObj);
          }
          resolve({
            success: true,
            inputData: inputData,
            error: ""
          });
        } else {
          resolve({
            success: false,
            inputData: [],
            error: "Empty File : " + result
          });
        }
      };
    } catch (err) {
      resolve({
        success: false,
        inputData: [],
        error: "Error while reading file : " + err.detail
      });
    }
  });
};

Sample CSV data that will work with this code 

employee,name,phone,salary
1,khalil,123,3000
2,ahmed,345,4000
3,sayeed,929,25000

Sample file picker html code

<div class="oj-sm-padding-0 oj-md-padding-4x">
    <h4>file-picker sample code</h4>

    <oj-file-picker on-oj-select="[[ fileSelectListener ]]">

    </oj-file-picker>


    <oj-table class="custom-table" id="employeetable" scroll-policy="loadMoreOnScroll"
        class="oj-flex-item oj-sm-12 oj-md-12" data="[[ employeeADP ]]" columns='[
    {"headerText":"employee","field":"employee"},
    {"headerText":"name","field":"name"},
    {"headerText":"phone","field":"phone"},
    {"headerText":"salary","field":"salary"}
    ]'>
    </oj-table>

</div>

Sample working code — iframe

Link to live demo — file-picker