I'm using the react Dropzone component and I need to do a conditional stylization to show if the file is accepted or rejected. It consists of changing the border color to red when the file is rejected and blue when it's accepted. MyDropzone

I need to allow just .csv and .dat files. It worked with accept parameter as "application/vnd.ms-excel" for csv . However, I didn't find the correct MIMEType for the .dat file. I tryed the following:

application/octet-stream

zz-application/zz-winassoc-dat

application/dat

When I put just ".dat" in the accept parameter, the input restriction works accepting just the .dat, but the conditional stylization doesn'work, because the variables isDragReject and isDragAccept take on incorrect values.

  const changeText=(isDragActive,isDragReject,isDragAccept)=>{

    return (
        <>
            <Typography sx={Styles.textBoard}>
                {(!isDragActive) && 'Drop files here or click to upload'}
                {(isDragActive && !isDragReject) && 'Drop files here'}
                {(isDragActive && isDragReject) && 'File not supported'}
            </Typography>
        </>
    )
}

<Dropzone accept={"application/vnd.ms-excel"} onDropAccepted={onUpload}>
            {({ getRootProps, getInputProps, isDragActive, isDragReject,isDragAccept }) => (
                <Box
                    {...getRootProps({
                        //loads the basic style
                        ...Styles.baseStyle,
                        //change the color in function of the file that 
                        //is being dragged over the area
                        ...(!isDragActive ? Styles.defaultStyle : {}),
                        ...(isDragReject ? Styles.rejectStyle : {}),
                        ...(isDragAccept ? Styles.acceptStyle : {})
                    })}
                        >
                    <CloudUpload className='ico' sx={Styles.uploadIcon}/>
                    {changeText(isDragActive,isDragReject)}
                    <input {...getInputProps()}/>
                </Box>
            )}
        </Dropzone>

CodePudding user response：

I found the problem, so I'm gonna answer. The MIMEType of the .dat that I'm using is undefined (maybe it's comon to see it). So, in the parameter accept (is desired to accept .csv and .dat) I just put the csv MIMEType and a blank one (remembering that the accept parameter receives an input like "MIMEType1,MIMEType2".

So it is as follows:

<Dropzone accept={'application/vnd.ms-excel,    '} onDropAccepted={onUpload}>