javascript - React js react-dropzone 删除文件
问题描述
链接:codesandbox
我必须确保上传一个文件,但我想提供在出错的情况下删除它以便上传另一个文件的可能性。
因此,单击 X 应该可以让您清空要加载的文件,但我没有成功。
你能给我一些建议吗?
代码:
import React from "react";
import ReactDOM from "react-dom";
import { useDropzone } from "react-dropzone";
import { AttachFile } from "@material-ui/icons";
import Chip from "@material-ui/core/Chip";
function Dropzone({ onDrop, onDelete }) {
const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
onDrop
});
let file = acceptedFiles[0];
const label = file ? `${file.path} - ${file.size} bytes` : "DRAG_FILE";
console.log("Dropzone", file);
return (
<div>
<div {...getRootProps({ className: "drop-zone2" })}>
<input {...getInputProps()} multiple={false} />
<Chip
icon={<AttachFile />}
label={label}
color="primary"
onDelete={
file
? () => {
file = [];
onDelete();
}
: false
}
/>
</div>
</div>
);
}
function App() {
const [state, setState] = React.useState({
fileName: "",
fileUpload: undefined
});
const onDrop = file => {
const reader = new FileReader();
reader.onabort = () => console.log("File reading was aborted.");
reader.onerror = () => console.log("File reading has failed.");
reader.onload = () => {
setState(prev => ({
...prev,
fileName: file[0].name,
fileUpload: file[0]
}));
};
reader.readAsArrayBuffer(file[0]);
};
return (
<>
<Dropzone
onDrop={onDrop}
multiple={false}
onDelete={() => {
setState(prev => ({
...prev,
fileName: "",
fileUpload: ""
}));
}}
/>
</>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
解决方案
我希望这段代码可以工作:
import React, { useState, useEffect, useCallback } from 'react'
import { useDropzone } from 'react-dropzone'
const CreateFileUpload = () => {
const onDrop = useCallback(acceptedFiles => {
// Do something with the files
}, [])
const { getRootProps, getInputProps, isDragActive, acceptedFiles } = useDropzone({ onDrop, accept: '.png, .jpeg' })
const files = acceptedFiles.map((file, i) => (
<li key={file.path} className="selected-file-item">
{file.path} <i className="fa fa-trash text-red" onClick={() => remove(i)}></i>
</li>
));
const remove = file => {
const newFiles = [...files]; // make a var for the new array
acceptedFiles.splice(file, 1); // remove the file from the array
};
return (
<div>
<div {...getRootProps()} className="dropzone-main">
<div
className="ntc-start-files-dropzone"
aria-disabled="false"
>
</div>
<button className="add-button" type="button">
<i className="fa fa-plus"></i>
</button>
<h3 className="upload-title">
<span></span>
</h3>
<input
type="file"
multiple=""
autocomplete="off"
className="inp-file"
// onChange={uploadFile}
multiple
{...getInputProps()}
/>
{isDragActive ?
<div></div>
:
<div>
<p> Upload files </p>
</div>
}
</div>
<aside>
{files.length > 0 ? <h5>Selected Files</h5> : <h5></h5>}
<ul>{files}</ul>
</aside>
</div>
)
}
export default CreateFileUpload
谢谢
推荐阅读
- javascript - 如何将动态 id 从 ajax 数据传递到 Modal
- javascript - 有没有办法引用在变量中声明的函数?
- swift - 在 iOS 应用程序中查找文件
- c++ - 如何知道 Windows 中初始即插即用枚举何时完成
- angularjs - 如何在控制器中使用元素?
- reactjs - React - 更新具有默认值的受控元素
- android - 如何解决firebase问题:“创建项目时出现未知错误。再试一次。”?
- vue.js - 如何将 pug 与电子 vue 一起使用?
- laravel - 我想在 Laravel 中的 update_at 列使用碳 24 小时后启用该章节
- python - 使用美丽的汤进行网络抓取 - 我如何获得所有类别