react下拉区域:在拖动时检查文件是活动的。
我已经建立了一个文件上传组件拖放使用react-dropzone。
我想检查文件，即用户拖到下拉区域并在拖动时执行此操作(在之前将其拖到下拉区域)。
我试过这个：
<Dropzone
accept="application/pdf"
onDrop={this.handleDragDrop}
>
{({ draggedFiles, isDragActive, isDragReject, acceptedFiles, rejectedFiles }) => {
if (isDragActive) {
... inspect files here (before dropping)
}
}}
</Dropzone>但非draggedFiles、acceptedFiles和rejectedFiles都有一定的价值。
我是不是遗漏了什么..。？
编辑：
为了让我的问题更清楚：
我想在用户将文件放到dragzone之前对它们进行验证。在我的场景中，通过将mimetype传递给accept属性的验证不是enougth：
- 用户正在将文件拖到
dragzone上，并触发onDragOver - 现在对文件进行检查，更新
dragzone以显示消息files are ok或files not ok，因此用户在删除文件之前获取该信息。 - 用户正在删除文件，
onDrop被触发。
回答 4
Stack Overflow用户
发布于 2019-02-08 18:10:01
简短回答
AFAIK你不能
长答案
让我们看看下面的代码：
<Dropzone
accept="image/*,application/pdf"
maxSize={5000000}
onDrop={this.onDrop}
onDragEnter={this.onDragEnter}
>
{({getRootProps, getInputProps, isDragAccept, isDragReject }) => {
let classes = 'form-control'
let placeholder = <p>Drag files here</p>;
if (isDragAccept) {
classes = `${classes} border-success bg-light`;
placeholder = <p className="text-success">Drop files now</p>;
}
if (isDragReject) {
classes = `${classes} border-danger bg-light`;
placeholder = <p className="text-danger">Some files are not allowed</p>
}
return (
<div {...getRootProps()} style={{ height: '100px' }} className={classes}>
<input {...getInputProps()} />
{placeholder}
</div>
);
}}
</Dropzone>如果要删除的文件满足某些要求(任何图像类型或pdf文件，且小于5MB的大小)，则此片段将更改下拉区域的样式。如果将任何文件拖到下拉区域，则acceptedFiles和rejectedFiles的值都是空数组。draggedFiles的值是一个DataTransferItems数组，它为我们提供正在拖动的文件的kind和type，例如{kind: "file", type: "application/pdf"}。
此时，根据文件的类型设置isDragAccept和isDragReject的值。因此，如果我们拖动一个图像或一个pdf文件--值isDragAccept设置为true --文本Drop files now将显示在下拉区域--它的边框将根据类border-success进行着色。但是，如果文件大于5MB，也会发生同样的情况！为什么？这是因为我们不能在drop事件之前读取文件。
让我们看看事件处理程序：
onDrop = (acceptedFiles, rejectedFiles, event) => {
console.log(event.dataTransfer.items)
console.log(event.dataTransfer.files)
}
onDragEnter = (event) => {
console.log(event.dataTransfer.items)
console.log(event.dataTransfer.files)
}拖动事件给我们一个dataTransfer属性，它是一个DataTransfer对象。在这里，我们有两个对我们很重要的属性：
DataTransfer.items这是一个DataTransferItemList对象，它为我们提供了一个DataTransferItems列表。它是draggedFiles数组中的同一个对象，我们可以在两个处理程序中访问这个对象: onDragEnter和onDrop。DataTransfer.files这持有拖动操作的FileList对象，但是在拖动事件中它是空的，所以只有在拖放之后才能访问它。例如，在前面的代码中，如果我们拖放某个文件，就会得到这个输出，用于控制台日志中显示的事件：
FileList {length: 0} // dragEnter event
FileList {0: File(30299626), length: 1} // drop event如果在删除后访问文件列表的元素0，则会得到：
File(30299626) {name: "python_101.pdf", lastModified: 1549327543709, lastModifiedDate: Mon Feb 04 2019 21:45:43 GMT-0300 (Chile Summer Time), webkitRelativePath: "", size: 30299626, …}因此，我们只能在删除事件后访问文件的数据。
Stack Overflow用户
发布于 2020-01-09 10:51:49
这样做(反应)：
onDragOverHandle(event) {
event.stopPropagation();
event.preventDefault();
console.log(event.dataTransfer.items[0])
}您可以获得拖动目标类型，例如：
{kind: "file", type: "image/png"}或{kind: "file", type: "video/mp4"}
然后你就可以做你想做的事了。
希望能帮助你~
Stack Overflow用户
发布于 2021-09-17 14:40:50
正如@Jay所言，您可以使用这样的方法：
const onDragEnter = (event) => {
const fileType = event.dataTransfer.items[0].type;
const validTypes = ['image/png', 'image/jpeg', 'image/jpg'];
const valitate = validTypes.some(types => types === fileType);
!valitate && setDanger(true);
}
const onDragLeave = (event) => {
setDanger(false);
}
<Dropzone
onDrop={ onDrop }
accept='image/jpeg, image/png, image/jpg'
maxSize={500000}
onDragEnter={onDragEnter}
onDragLeave={onDragLeave}
>https://stackoverflow.com/questions/49997587
复制相似问题
腾讯云开发者
