dropzonereact-dropzone

DropZone: How to Accept .csv Files?


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:

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


Solution

  • 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.