react-dropzone: isDragReject true for accepted file extension

This however doesn’t fix the problem for files with unspecified MIME types. Any hints on how to handle that case?

Any chance this issue can be reopened, so no new ones need be created?

@lruckman thx, for those coming here from Google try this accept=".csv,text/csv"

Shouldn’t a combination of mime’s and extensions in the accept list address this?

So I’m thinking this has to do with how isDragReject is being set:

https://github.com/react-dropzone/react-dropzone/blob/ccb859f1eaa43683952bc4f3d4b6d3283a8582a8/src/index.js#L310-L311

as per the documentation, we’re unable to read the file name mid-drag, only the mime-type. So in cases where we have an accept that isn’t a mime, filesCount > 0 will be true, and isDragAccept will be false because of how attr-accept validates the mimes:

    return acceptedFilesArray.some(type => {
      const validType = type.trim()
      if (validType.charAt(0) === '.') {
        return fileName.toLowerCase().endsWith(validType.toLowerCase())
      } else if (/\/\*$/.test(validType)) {
        // This is something like a image/* mime type
        return baseMimeType === validType.replace(/\/.*$/, '')
      }
      return mimeType === validType
    })

https://github.com/okonet/attr-accept/blob/master/src/index.js#L24-L33

My initial thoughts are to check what kind of accept prop we have (mime or extension) and include that in the setting of isDragReject, something like:

const acceptIsMime = /\/\*$/.test(this.props.accept)

const isDragReject = acceptIsMime && filesCount > 0 && (!isDragActive || !isMultipleAllowed)

Maybe the test for what kind of accept we have should actually live in fileAccepted?

How do we feel about this solution?

/cc @rkmarks / @okonet

Thanks @ArtemBernatskyy : You are close to god 😃 It solved my csv issue.

I’ll have some time tomorrow to work on this. Though might have something w/ attr-accept npm module. Not sure. I’ll dig in