Реактивная проверка ввода при загрузке CSV

Question

Я пытаюсь работать с модулем, который я нашел на github для реакции. По сути, модуль принимает CSV-файлы и преобразует их в JSON, это здорово! Однако я пытаюсь немного улучшить его, добавив некоторую проверку входных данных. Если вы загрузите какой-либо файл, кроме CSV, модуль обработает его и, как правило, потерпит неудачу (Представьте себе, что вы пытаетесь преобразовать содержимое файла jpeg в json .... это не очень хорошо)

Я нашел строку, где происходит ввод файла, и попытался изменить его, чтобы он принимал только файлы CSV. Частично это сработало, потому что, когда я зашел на страницу и мне было предложено загрузить файл, расширение файла по умолчанию, которое искали в проводнике, было csv, а все остальные файлы были скрыты. Однако я все еще был в состоянии загрузить любой тип файла по своему выбору, несмотря на установку acccept = '.csv'

Я прикрепил код ниже. Мне интересно, что еще я могу сделать, чтобы запретить пользователю загружать файлы других типов, кроме csv, я думал, что у меня это изменилось при принятии значения типа ввода, но я не думаю.

<code>import React from 'react'
import { render } from 'react-dom'
import CsvParse from '../../src'

class Demo extends React.Component {
  constructor() {
    super()

    this.state = {
      data: null,
      error: null,
    }
  }

  handleData = data => {
    this.setState({ data })
  }

  handleError = error => {
    this.setState({ error })
  }

  render() {
    const keys = [
      'Loc_num',
      'Toll Free Number',
      'Ring to Number',
      'Description',

    ]

    return (
      <div>
        <h1>Demo React Csv Parse</h1>

        <CsvParse
          keys={keys}
          onDataUploaded={this.handleData}
          onError={this.handleError}
          render={onChange => <input type="file" accept=".csv" onChange={onChange} />}
        />

        {this.state.data && (
          <pre>{JSON.stringify(this.state.data, null, 2)}

)} {this.state.error && (

{JSON.stringify(this.state.error, null, 2)}

)} ) } } render (, document.querySelector ('# demo'))