DropZone: How to Accept .csv Files?

Question

I've read quite a few answers on SO about this, and most advise using the acceptedFiles property to specify the accepted mime types.

However, the DropZone docs say:

Mime type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows. In some cases there might not be a mime type set at all.

I'm trying to upload a .csv file, and (using material-ui-dropzone), so far I've tried:

  <Dropzone
    acceptedFiles={['.csv', 'text/*']}
    showPreviews={true}
    showFileNamesInPreview={true}
  />

  <Dropzone
    acceptedFiles={'.csv', 'text/*'}
    showPreviews={true}
    showFileNamesInPreview={true}
  />

  <Dropzone
    acceptedFiles={'.csv', 'text/csv'}
    showPreviews={true}
    showFileNamesInPreview={true}
  />

...etc., but so far none are working:

• The open file dialog shows .csv files as grayed out
• Dragging-and-dropping a .csv file to DropZone gets a "File SeriesNotes.csv was rejected. File type not supported." message

What is the correct way to solve this for material-ui-dropzone (or for any version of DropZone)?

Answer 1

After lots of trial and error, this worked for me.

acceptedFiles={[".csv, text/csv, application/vnd.ms-excel, application/csv, text/x-csv, application/x-csv, text/comma-separated-values, text/x-comma-separated-values"]}

The main one on windows was the .csv the rest are just in case.