I have a question regarding the react-file-drop module. You can see a demo of this module working here. I also provide you the important codesample here:
import React from 'react';
import { FileDrop } from 'react-file-drop';
import './Demo.css';
export const Demo = () => {
const styles = { border: '1px solid black', width: 600, color: 'black', padding: 20 };
return (
<div>
<h1>React File Drop demo</h1>
<div style={styles}>
<FileDrop
onFrameDragEnter={(event) => console.log('onFrameDragEnter', event)}
onFrameDragLeave={(event) => console.log('onFrameDragLeave', event)}
onFrameDrop={(event) => console.log('onFrameDrop', event)}
onDragOver={(event) => console.log('onDragOver', event)}
onDragLeave={(event) => console.log('onDragLeave', event)}
onDrop={(files, event) => console.log('onDrop!', files, event)}
>
Drop some files here!
</FileDrop>
</div>
</div>
);
};
The problem I face currently is that I dont know how to filter the input data which I drop into the container. For example I wish that the module only accepts .csv data or .jpeg data and everything else will be denied. Do you think there is a way to archieve this and if so, how?
You should be able to handle that in the onDrop callback:
onDrop={(files, event) => {
const csvFiles = files.filter(file => file.name.endsWith('.csv'));
console.log('onDrop!', csvFiles, event);
}}
You could validate the files in onDrop function.
export const Demo = () => {
const styles = {
border: '1px solid black',
width: 600,
color: 'black',
padding: 20,
}
const onDrop = (files, event) => {
if (files[0].type !== 'text/csv' || files[0].type !== 'image/jpeg') {
alert('Only CSV and JPEG files are allowed')
return
}
// do something with the file
}
return (
<div>
<h1>React File Drop demo</h1>
<div style={styles}>
<FileDrop onDrop={onDrop}>Drop some files here!</FileDrop>
</div>
</div>
)
}
For multiple files you can create an array of allowed filetypes and check if some of the files types are not in the array of allowed types.