The following code can be used to add the attach file input field in the custom page. Once the file attached, the data will be fetched from the attached csv file as array of objects.
HTML:
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script> </head> <body> <div class="input-group"> <label class="input-group-text">Attach Your File Here</label> <input type="file" class="fileselect fileattach" accept=".csv" id="attachfile" onchange="handleFile()" /> </div> </body> </html>
JS code:
/**
* Reads the content of the selected CSV file or the specified fileId and parses it.
* @function
* @returns {void}
*/
function handleFile() {
try {
const fileInput = document.getElementById('attachfile');
const file = fileInput.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (e) {
const csvData = e.target.result;
Papa.parse(csvData, {
header: true,
dynamicTyping: true,
complete: function (results) {
const csvData = results.data;
},
error: function (error) {
console.error('Error parsing CSV:', error.message);
}
});
};
reader.readAsText(file);
}
} catch (e) {
console.error('error @ handleFile', e);
}
}