72 lines
1.7 KiB
JavaScript
72 lines
1.7 KiB
JavaScript
import React, { useState } from "react";
|
|
import Papa from "papaparse";
|
|
|
|
const allowedExtensions = ["csv"];
|
|
|
|
const CsvReader = () => {
|
|
const [data, setData] = useState([]);
|
|
const [error, setError] = useState("");
|
|
const [file, setFile] = useState("");
|
|
const handleChange = (e) => {
|
|
setError("");
|
|
|
|
//check if user has entered the file
|
|
if (e.target.files.length) {
|
|
const inputFile = e.target.files[0];
|
|
|
|
//check the file extensions
|
|
const fileExtension = inputFile?.type.split("/")[1];
|
|
if (!allowedExtensions.includes(fileExtension)) {
|
|
setError("Please input a csv file");
|
|
}else{
|
|
setFile(inputFile);
|
|
console.log('handleChange() file updated');
|
|
}
|
|
}
|
|
};
|
|
const handleParse = () => {
|
|
console.log('handleParse() start ...');
|
|
if (!file) {
|
|
console.log('handleParse() file NOT valid');
|
|
return setError("Enter a valid file");
|
|
} else {
|
|
console.log('handleParse() file valid');
|
|
Papa.parse(file, {
|
|
complete: updateData,
|
|
header: true
|
|
});
|
|
}
|
|
console.log('handleParse() done.');
|
|
};
|
|
const updateData = (result) => {
|
|
console.log('updateData() start...');
|
|
let data = result.data;
|
|
setData(data);
|
|
console.log('updateData() done.');
|
|
};
|
|
return(
|
|
<div className="csv-reader">
|
|
<h3>CsvReader</h3>
|
|
<input
|
|
className="csv-input"
|
|
id="csv-input"
|
|
type="file"
|
|
name="file"
|
|
placeholfer={null}
|
|
onChange={handleChange}
|
|
/>
|
|
<p />
|
|
<button onClick={handleParse}>Parse</button>
|
|
<div>
|
|
{error ? error : data.map((value, idx) => {
|
|
return <div key={idx}>
|
|
{JSON.stringify(value)}
|
|
</div>}
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CsvReader;
|