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)?

Altercation

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.

Overbold

this work wells, Noted that this's better to add 1-element array, like this answer used, instead of separate them differently in each array element – Hairdresser

accept: "text/plain, application/vnd.ms-excel" --> this worked for me for csv and text files, but it also accepts .xls files, which I am trying to avoid. Any suggestions? Edit: As far as I can tell, application/vnd.ms-excel is the accepting criteria for .csv & .xls files. The other params aren't really do anything. Could you please verify at your end if this is true as well? I'm having trouble with exclusions – Amphoteric

: if I remove acceptapplication/vnd.ms-excel, it is correctly excluding .xls and .xlsx files, and accepting .csv files only. However, onHover, it shows up as an unaccepted file type. Sorry if I'm confusing you. Will find a solution and update it here – Amphoteric

Thank you @Overbold that worked out just fine to me! – Distrust

Answer 2

After more trial and error, got the following - csv only, no xls

React-Dropzone 12.1.0

  <Dropzone
    accept=".csv, text/csv, application/csv, text/x-csv, application/x-csv, text/comma-separated-values, text/x-comma-separated-values"
   >

what a nightmare!!

Koziarz