Hacker-Software/minmal-file-cloud-email-pim-passmanager
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Ordner-Freigaben zeigen Dateiliste + Download/Loeschen

Browse Source 
Share-Links fuer Ordner verhalten sich jetzt je nach Berechtigung:

read (Nur Lesen):
- Zeigt alle Dateien im Ordner mit Name, Groesse, Typ
- Download-Button pro Datei
- Kein Upload, kein Loeschen

write (Lesen+Schreiben):
- Zeigt alle Dateien im Ordner
- Download-Button pro Datei
- Loeschen-Button pro Datei
- Upload-Zone (Drag & Drop + Button)
- Nach Upload wird Dateiliste automatisch aktualisiert

upload_only (Nur Upload):
- Kein Dateilisting, kein Ordnername sichtbar
- Nur Upload-Zone

Backend-Endpunkte:
- GET /share/<token>/files - Dateien im geteilten Ordner auflisten
- GET /share/<token>/files/<id>/download - Einzeldatei herunterladen
- DELETE /share/<token>/files/<id> - Datei loeschen (nur write)
- Alle Endpunkte pruefen Passwort, Ablaufdatum und Berechtigung
- Dateien muessen direkte Kinder des geteilten Ordners sein (kein Ausbruch)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Stefan Hacker
2026-04-11 20:09:58 +02:00
parent 38d6acb1a1
commit 7a26788ad2
2 changed files with 246 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/ShareView.vue
+131 -33
View File
@@ -1,6 +1,6 @@
<template>
<div class="share-container">
<div class="share-card">
<div class="share-card" :class="{ wide: fileInfo?.is_folder && fileInfo?.permission !== 'upload_only' }">
<i class="pi pi-cloud" style="font-size: 2rem; color: var(--p-primary-color)"></i>
<div v-if="loading" class="share-loading">
@@ -17,8 +17,8 @@
<h2 v-if="fileInfo.permission !== 'upload_only'">{{ fileInfo.name }}</h2>
<h2 v-else>Datei-Upload</h2>
<p class="file-size" v-if="fileInfo.size && !fileInfo.is_folder && fileInfo.permission !== 'upload_only'">{{ formatSize(fileInfo.size) }}</p>
<Tag v-if="fileInfo.is_folder && fileInfo.permission !== 'upload_only'" value="Ordner" severity="info" />
<!-- Password gate -->
<div v-if="fileInfo.has_password && !authenticated" class="password-form">
<p>Diese Freigabe ist passwortgeschuetzt.</p>
<div class="field">
@@ -28,23 +28,54 @@
<Button label="Entsperren" @click="verifyPassword" :loading="verifying" fluid />
</div>
<!-- Authenticated content -->
<div v-else class="actions-section">
<!-- Download (files only, not upload_only) -->
<!-- Single file: download -->
<div v-if="!fileInfo.is_folder && fileInfo.download_allowed" class="action-block">
<Button
label="Herunterladen"
icon="pi pi-download"
size="large"
@click="downloadFile"
/>
<Button label="Herunterladen" icon="pi pi-download" size="large" @click="downloadFile" />
</div>
<!-- Upload-only hint -->
<!-- Folder: file listing (read + write) -->
<div v-if="fileInfo.is_folder && fileInfo.permission !== 'upload_only'" class="folder-content">
<div class="folder-toolbar">
<span class="folder-count">{{ folderFiles.length }} Dateien</span>
<Button v-if="fileInfo.upload_allowed" icon="pi pi-upload" label="Hochladen" size="small" @click="$refs.uploadInput.click()" />
</div>
<div v-if="loadingFiles" class="loading-small">
<i class="pi pi-spin pi-spinner"></i> Lade Dateien...
</div>
<div v-else class="file-list">
<div v-for="f in folderFiles" :key="f.id" class="file-item">
<div class="file-info">
<i :class="f.is_folder ? 'pi pi-folder' : 'pi pi-file'"></i>
<div class="file-details">
<span class="file-name">{{ f.name }}</span>
<span class="file-meta">{{ f.is_folder ? 'Ordner' : formatSize(f.size) }}</span>
</div>
</div>
<div class="file-actions">
<Button v-if="!f.is_folder" icon="pi pi-download" text size="small"
@click="downloadFolderFile(f)" />
<Button v-if="fileInfo.permission === 'write'" icon="pi pi-trash" text size="small"
severity="danger" @click="deleteFolderFile(f)" />
</div>
</div>
<div v-if="!folderFiles.length" class="empty-folder">
<i class="pi pi-folder-open"></i>
<p>Ordner ist leer</p>
</div>
</div>
</div>
<!-- Upload only hint -->
<p v-if="fileInfo.permission === 'upload_only'" class="upload-only-hint">
Dieser Link erlaubt nur das Hochladen von Dateien.
</p>
<!-- Upload (folders only) -->
<!-- Upload zone (write + upload_only) -->
<div v-if="fileInfo.upload_allowed" class="action-block">
<div class="upload-area"
@dragover.prevent="isDragging = true"
@@ -77,7 +108,6 @@ import axios from 'axios'
import Button from 'primevue/button'
import Password from 'primevue/password'
import Message from 'primevue/message'
import Tag from 'primevue/tag'
import ProgressBar from 'primevue/progressbar'
const route = useRoute()
@@ -91,6 +121,9 @@ const authenticated = ref(false)
const authError = ref('')
const verifying = ref(false)
const folderFiles = ref([])
const loadingFiles = ref(false)
const isDragging = ref(false)
const uploading = ref(false)
const uploadPercent = ref(0)
@@ -98,19 +131,31 @@ const uploadStatus = ref('')
const uploadSuccess = ref('')
function formatSize(bytes) {
if (!bytes) return ''
if (!bytes) return '0 B'
const units = ['B', 'KB', 'MB', 'GB']
let i = 0
let size = bytes
let i = 0; let size = bytes
while (size >= 1024 && i < units.length - 1) { size /= 1024; i++ }
return `${size.toFixed(i > 0 ? 1 : 0)} ${units[i]}`
}
function getAuthHeaders() {
const headers = {}
if (fileInfo.value?.has_password && password.value) {
headers['X-Share-Password'] = password.value
}
return headers
}
async function loadInfo() {
try {
const res = await axios.get(`/api/share/${token}/info`)
fileInfo.value = res.data
if (!res.data.has_password) authenticated.value = true
if (!res.data.has_password) {
authenticated.value = true
if (res.data.is_folder && res.data.permission !== 'upload_only') {
await loadFolderFiles()
}
}
} catch (err) {
error.value = err.response?.data?.error || 'Link nicht gefunden oder abgelaufen'
} finally {
@@ -124,6 +169,9 @@ async function verifyPassword() {
try {
await axios.post(`/api/share/${token}/verify`, { password: password.value })
authenticated.value = true
if (fileInfo.value?.is_folder && fileInfo.value?.permission !== 'upload_only') {
await loadFolderFiles()
}
} catch (err) {
authError.value = err.response?.data?.error || 'Falsches Passwort'
} finally {
@@ -131,6 +179,18 @@ async function verifyPassword() {
}
}
async function loadFolderFiles() {
loadingFiles.value = true
try {
const res = await axios.get(`/api/share/${token}/files`, { headers: getAuthHeaders() })
folderFiles.value = res.data
} catch {
folderFiles.value = []
} finally {
loadingFiles.value = false
}
}
function downloadFile() {
let url = `/api/share/${token}/download`
if (fileInfo.value?.has_password && password.value) {
@@ -139,6 +199,23 @@ function downloadFile() {
window.location.href = url
}
function downloadFolderFile(file) {
let url = `/api/share/${token}/files/${file.id}/download`
if (fileInfo.value?.has_password && password.value) {
url += `?password=${encodeURIComponent(password.value)}`
}
window.location.href = url
}
async function deleteFolderFile(file) {
try {
await axios.delete(`/api/share/${token}/files/${file.id}`, { headers: getAuthHeaders() })
folderFiles.value = folderFiles.value.filter(f => f.id !== file.id)
} catch (err) {
alert(err.response?.data?.error || 'Fehler beim Loeschen')
}
}
async function onDrop(e) {
isDragging.value = false
const files = Array.from(e.dataTransfer.files)
@@ -163,19 +240,12 @@ async function uploadFiles(files) {
try {
const formData = new FormData()
formData.append('file', file)
if (fileInfo.value?.has_password && password.value) {
formData.append('password', password.value)
}
if (password.value) formData.append('password', password.value)
await axios.post(`/api/share/${token}/upload`, formData, {
headers: {
'Content-Type': 'multipart/form-data',
...(password.value ? { 'X-Share-Password': password.value } : {}),
},
headers: { 'Content-Type': 'multipart/form-data', ...getAuthHeaders() },
})
uploaded++
} catch {
errors++
}
} catch { errors++ }
uploadPercent.value = Math.round(((uploaded + errors) / files.length) * 100)
}
@@ -185,6 +255,11 @@ async function uploadFiles(files) {
} else {
uploadSuccess.value = `${uploaded} Datei${uploaded !== 1 ? 'en' : ''} erfolgreich hochgeladen`
}
// Reload file list
if (fileInfo.value?.is_folder && fileInfo.value?.permission !== 'upload_only') {
await loadFolderFiles()
}
}
onMounted(loadInfo)
@@ -193,26 +268,49 @@ onMounted(loadInfo)
<style scoped>
.share-container {
min-height: 100vh; display: flex; align-items: center; justify-content: center;
background: var(--p-surface-50);
background: var(--p-surface-50); padding: 1rem;
}
.share-card {
background: var(--p-surface-0); border-radius: 12px; padding: 3rem;
background: var(--p-surface-0); border-radius: 12px; padding: 2.5rem;
text-align: center; max-width: 500px; width: 100%;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.share-card.wide { max-width: 700px; }
.share-card h2 { margin: 1rem 0 0.25rem; font-size: 1.25rem; }
.file-size { color: var(--p-text-muted-color); margin-bottom: 1rem; }
.password-form { text-align: left; margin-top: 1.5rem; }
.password-form p { margin-bottom: 1rem; color: var(--p-text-muted-color); }
.field { margin-bottom: 1rem; }
.actions-section { margin-top: 1.5rem; }
.action-block { margin-bottom: 1.5rem; }
.actions-section { margin-top: 1.5rem; text-align: left; }
.action-block { margin-bottom: 1.5rem; text-align: center; }
.share-loading, .share-error { margin-top: 1.5rem; }
/* Folder content */
.folder-content { margin-bottom: 1.5rem; }
.folder-toolbar {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--p-surface-200);
}
.folder-count { font-size: 0.85rem; color: var(--p-text-muted-color); }
.file-list { max-height: 400px; overflow-y: auto; }
.file-item {
display: flex; align-items: center; justify-content: space-between;
padding: 0.5rem 0; border-bottom: 1px solid var(--p-surface-100);
}
.file-info { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; }
.file-info i { font-size: 1.1rem; color: var(--p-surface-500); flex-shrink: 0; }
.file-details { display: flex; flex-direction: column; min-width: 0; }
.file-name { font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { font-size: 0.75rem; color: var(--p-text-muted-color); }
.file-actions { display: flex; flex-shrink: 0; }
.empty-folder { text-align: center; padding: 2rem; color: var(--p-text-muted-color); }
.empty-folder i { font-size: 1.5rem; }
.loading-small { text-align: center; padding: 1rem; color: var(--p-text-muted-color); }
/* Upload */
.upload-area {
border: 2px dashed var(--p-surface-300); border-radius: 10px;
padding: 2rem; text-align: center; cursor: pointer;
transition: all 0.2s;
padding: 2rem; text-align: center; transition: all 0.2s;
}
.upload-area:hover, .upload-area.dragging {
border-color: var(--p-primary-color); background: var(--p-primary-50);
@@ -222,5 +320,5 @@ onMounted(loadInfo)
.upload-area p { margin: 0.5rem 0; color: var(--p-text-muted-color); font-size: 0.9rem; }
.upload-progress { margin-top: 1rem; }
.upload-progress p { font-size: 0.85rem; color: var(--p-text-muted-color); margin-top: 0.5rem; }
.upload-only-hint { color: var(--p-text-muted-color); font-size: 0.9rem; margin-bottom: 1rem; }
.upload-only-hint { color: var(--p-text-muted-color); font-size: 0.9rem; margin-bottom: 1rem; text-align: center; }
</style>