[英]React.js file upload UI drag and drop not working
I am trying to write a file upload for my react.js app.我正在尝试为我的 react.js 应用程序编写文件上传。 However, I am not able to get the drag and drop zone to work properly.
但是,我无法让拖放区正常工作。 Even though I stop the propagation and prevent Default on drag and drop events, it still does not work as expected.
即使我停止传播并阻止拖放事件的默认值,它仍然无法按预期工作。 The browser still opens my files.
浏览器仍然打开我的文件。
export default function DraggableUploader() {
const fileInput = useRef(null)
const [loadedFile, setLoadedFile] = useState(null)
const [isLoading, setIsLoading] = useState(false)
const handleDragEnter = e => {
e.preventDefault();
e.stopPropagation();
};
const handleDragLeave = e => {
e.preventDefault();
e.stopPropagation();
};
const handleDragOver = e => {
e.preventDefault();
e.stopPropagation();
};
const handleDrop = e => {
e.preventDefault();
e.stopPropagation();
};
function handleSubmit(e) {
e.preventDefault()
console.log(`current file`, loadedFile.name)
}
return (
<div className="dropzone">
<div className="sub-header">Drag your audio file here:</div>
<div className="draggable-container">
<input
type="file"
className="file-browser-input"
name="file-browser-input"
style={{display: "none"}}
ref={fileInput}
onDrop={e => handleDrop(e)}
onDragOver={e => handleDragOver(e)}
onDragEnter={e => handleDragEnter(e)}
onDragLeave={e => handleDragLeave(e)}
onChange={handleInputChange}
/>
<div className="file-browser-container">
<Button variant="outline-primary" onClick={handleInputClick}>Browse</Button>
</div>
</div>
<Button variant="primary" onClick={handleSubmit}>Submit</Button>
</div>
)
}
obviously I did not have a useEffect to add the event listeners.. if you add the below code all works as expected:显然我没有 useEffect 来添加事件侦听器。如果添加以下代码,所有工作都按预期工作:
useEffect(() => {
let div = dropRef.current;
div.addEventListener('dragenter', handleDragEnter);
div.addEventListener('dragleave', handleDragLeave);
div.addEventListener('dragover', handleDragOver);
div.addEventListener('drop', handleDrop);
return function cleanup() {
div.removeEventListener('dragenter', handleDragEnter);
div.removeEventListener('dragleave', handleDragLeave);
div.removeEventListener('dragover', handleDragOver);
div.removeEventListener('drop', handleDrop);
};
});
You don't need to attach event listeners if you are using the arrow function.如果您使用箭头 function,则不需要附加事件侦听器。 Use the below code all events will work the only problem I saw in your above code was you attached events on a hidden input attach events to the outer most div it will work.
使用下面的代码所有事件都可以工作,我在上面的代码中看到的唯一问题是将隐藏输入上的事件附加到最外层的 div 上。 Good Luck!
祝你好运!
export default function App() {
const handleDragEnter = e => {
e.preventDefault();
console.log("drag enter");
};
const handleDragLeave = e => {
e.preventDefault();
console.log("drag leave");
};
const handleDragOver = e => {
e.preventDefault();
console.log("drag over");
};
const handleDrop = e => {
e.preventDefault();
console.log("drag drop");
};
const handleInputChange = () => {};
return (
<div
className="dropzone"
onDrop={e => handleDrop(e)}
onDragOver={e => handleDragOver(e)}
onDragEnter={e => handleDragEnter(e)}
onDragLeave={e => handleDragLeave(e)}
onChange={handleInputChange}
>
<div className="sub-header">Drag your audio file here:</div>
<div className="draggable-container">
<input
type="file"
className="file-browser-input"
name="file-browser-input"
style={{ display: "none" }}
/>
</div>
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.