react-papaparse is the fastest in-browser CSV (or delimited text) parser for React. It is full of useful features such as CSVReader, CSVDownloader, readString, jsonToCSV, readRemoteFile, ... etc.
accept attribute only works if you try to upload a file using the input HTML element, but if you try to drop an image/png the CSVReader doesn't throw an error, the validation can be made easily:
const typeAccepted = 'text/csv, .csv, application/vnd.ms-excel';
const handleDrop = (e) => {
e.preventDefault();
e.stopPropagation();
const [file] = e.dataTransfer.files;
if (file.type && typeAccepted.includes(file.type)) {
// do something
} else {
console.error(`File type ${file.type} is not accepted`);
return false;
}
}
I would love to be able to submit a PR but I have no idea about TS
accept
attribute only works if you try to upload a file using the input HTML element, but if you try to drop animage/png
theCSVReader
doesn't throw an error, the validation can be made easily:I would love to be able to submit a PR but I have no idea about TS