![](/img/trans.png)
[英]React js react-dropzone automatic opening when the page is loaded
[英]React js react-dropzone remove file
链接: 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
谢谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.