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,25000Sample 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
