Dicken/dickendock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Fortschrittsanzeige beim Upload (Dateien-Tool + öffentliche Upload-Seite), Drag&Drop auf Upload-Seite ergänzt

Browse Source
This commit is contained in:
Dicken
2026-06-23 23:52:32 +02:00
parent 25bca76dad
commit 1d97791237
3 changed files with 115 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/tools/dateien.jsx
View File

@@ -1,5 +1,5 @@
import { useState, useEffect, useRef, useCallback } from 'react';
import { api, S } from '../lib.js';
import { api, apiUpload, S } from '../lib.js';
import { useConfirm } from '../confirm.jsx';
import { UploadIcon, DownloadIcon, TrashIcon, SearchIcon, ChevronIcon } from '../icons.jsx';
@@ -602,6 +602,7 @@ export default function Dateien({ toast, mobile }) {
});
const [pwPrompt, setPwPrompt] = useState(null); // {file}
const [uploading, setUploading] = useState(false);
const [uploadProgress, setUploadProgress] = useState(0);
const [dragOver, setDragOver] = useState(false);
const [newFolder, setNewFolder] = useState(false);
const [folderName, setFolderName] = useState('');
@@ -634,13 +635,14 @@ export default function Dateien({ toast, mobile }) {
const doUpload = async file => {
if (!file) return;
setUploading(true);
setUploadProgress(0);
try {
const form = new FormData();
form.append('file', file);
if (currentFolderId) form.append('folder_id', currentFolderId);
await api('/tools/dateien',{method:'POST',body:form,isFile:true});
await apiUpload('/tools/dateien', form, { onProgress: setUploadProgress });
toast(`${file.name} hochgeladen ✓`); load();
} catch(e) { toast(e.message,'error'); } finally { setUploading(false); }
} catch(e) { toast(e.message,'error'); } finally { setUploading(false); setUploadProgress(0); }
};
const onFileInput = e => { doUpload(e.target.files?.[0]); e.target.value=''; };
@@ -912,6 +914,7 @@ export default function Dateien({ toast, mobile }) {
<div onDragOver={e=>{e.preventDefault();setDragOver(true);}} onDragLeave={()=>setDragOver(false)}
onDrop={onDrop} onClick={()=>fileRef.current?.click()}
style={{
position:'relative',overflow:'hidden',
display:'flex',alignItems:'center',justifyContent:'center',gap:8,
padding:'0 18px',height:44,borderRadius:10,cursor:'pointer',
border:`2px dashed ${dragOver?'#4ecdc4':'rgba(255,255,255,0.15)'}`,
@@ -919,9 +922,14 @@ export default function Dateien({ toast, mobile }) {
transition:'all 0.15s',flexShrink:0,
minWidth:mobile?'100%':200,
}}>
{uploading && (
<div style={{position:'absolute',left:0,top:0,bottom:0,
width:`${uploadProgress}%`,background:'rgba(78,205,196,0.18)',
transition:'width 0.2s',pointerEvents:'none'}}/>
)}
<UploadIcon size={14} color={dragOver?'#4ecdc4':'rgba(255,255,255,0.4)'}/>
<span style={{color:dragOver?'#4ecdc4':'rgba(255,255,255,0.45)',fontFamily:'monospace',fontSize:11}}>
{uploading?'Hochladen…':dragOver?'Loslassen':mobile?'Datei hochladen':'Hier ablegen oder klicken'}
<span style={{position:'relative',color:dragOver?'#4ecdc4':'rgba(255,255,255,0.45)',fontFamily:'monospace',fontSize:11}}>
{uploading?`Hochladen… ${uploadProgress}%`:dragOver?'Loslassen':mobile?'Datei hochladen':'Hier ablegen oder klicken'}
</span>
</div>
</div>}