66 lines
2.6 KiB
React
66 lines
2.6 KiB
React
import React, { useRef, useState } from 'react';
|
||
import './DragUpload.css';
|
||
|
||
export default function DragUpload() {
|
||
const [files, setFiles] = useState([]);
|
||
const [over, setOver] = useState(false);
|
||
const fileRef = useRef(null);
|
||
|
||
const addFiles = (flist) => {
|
||
Array.prototype.forEach.call(flist, (f) => {
|
||
const id = 'f' + Date.now() + Math.random().toString(36).slice(2, 6);
|
||
const item = { id, name: f.name, progress: 0, done: false, thumb: '' };
|
||
if (/^image\//.test(f.type) && f.size < 2 * 1024 * 1024) {
|
||
const reader = new FileReader();
|
||
reader.onload = (e) => setFiles((fs) => fs.map((x) => (x.id === id ? { ...x, thumb: e.target.result } : x)));
|
||
reader.readAsDataURL(f);
|
||
}
|
||
setFiles((fs) => [...fs, item]);
|
||
const t = setInterval(() => {
|
||
setFiles((fs) =>
|
||
fs.map((x) => {
|
||
if (x.id !== id) return x;
|
||
const p = Math.min(100, x.progress + Math.random() * 22);
|
||
return { ...x, progress: p, done: p >= 100 };
|
||
})
|
||
);
|
||
setFiles((fs) => {
|
||
if (fs.find((x) => x.id === id && x.progress >= 100)) clearInterval(t);
|
||
return fs;
|
||
});
|
||
}, 220);
|
||
});
|
||
};
|
||
|
||
const remove = (id) => setFiles((fs) => fs.filter((x) => x.id !== id));
|
||
|
||
return (
|
||
<div className="aa-upload">
|
||
<div
|
||
className={'aa-upload-drop' + (over ? ' is-over' : '')}
|
||
onClick={() => fileRef.current.click()}
|
||
onDragOver={(e) => { e.preventDefault(); setOver(true); }}
|
||
onDragLeave={() => setOver(false)}
|
||
onDrop={(e) => { e.preventDefault(); setOver(false); addFiles(e.dataTransfer.files); }}
|
||
>
|
||
<span className="aa-upload-icon">⬆️</span>
|
||
<div className="aa-upload-hint">将文件拖到此处，或 <b>点击选择</b></div>
|
||
</div>
|
||
<input ref={fileRef} type="file" multiple style={{ display: 'none' }} onChange={(e) => { addFiles(e.target.files); e.target.value = ''; }} />
|
||
<div className="aa-upload-list">
|
||
{files.map((it) => (
|
||
<div key={it.id} className="aa-upload-item">
|
||
<div className="aa-upload-thumb">{it.thumb ? <img src={it.thumb} alt="" /> : '文件'}</div>
|
||
<div className="aa-upload-meta">
|
||
<div className="aa-upload-name">{it.name}</div>
|
||
<div className="aa-upload-bar"><i style={{ width: it.progress + '%' }} /></div>
|
||
</div>
|
||
<div className="aa-upload-status">{it.done ? '已完成' : Math.round(it.progress) + '%'}</div>
|
||
<button className="aa-upload-del" onClick={() => remove(it.id)}>×</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|