large ui change
This commit is contained in:
parent
d0766e05cb
commit
19978d9302
34
Dockerfile
34
Dockerfile
@ -3,52 +3,54 @@
|
||||
############################
|
||||
# Frontend build (Vite/React)
|
||||
############################
|
||||
FROM node:20-alpine AS fe
|
||||
# Run toolchains on the build machine, not target arch
|
||||
FROM --platform=$BUILDPLATFORM node:20-alpine AS fe
|
||||
WORKDIR /src/frontend
|
||||
COPY frontend/package*.json ./
|
||||
RUN npm ci
|
||||
RUN --mount=type=cache,target=/root/.npm npm ci
|
||||
COPY frontend/ .
|
||||
# default Vite outDir is "dist" under CWD
|
||||
RUN npm run build
|
||||
|
||||
# expose artifacts in a neutral location
|
||||
RUN mkdir -p /out && cp -r dist/* /out/
|
||||
|
||||
############################
|
||||
# Backend build (Go)
|
||||
############################
|
||||
FROM golang:1.22-alpine AS be
|
||||
FROM --platform=$BUILDPLATFORM golang:1.22-alpine AS be
|
||||
RUN apk add --no-cache ca-certificates upx git
|
||||
ENV CGO_ENABLED=0 GOOS=linux GOARCH=amd64 \
|
||||
ARG TARGETOS
|
||||
ARG TARGETARCH
|
||||
ENV CGO_ENABLED=0 GOOS=${TARGETOS} GOARCH=${TARGETARCH} \
|
||||
GOPROXY=https://proxy.golang.org,direct \
|
||||
GOPRIVATE=scm.bstein.dev
|
||||
|
||||
WORKDIR /src/backend
|
||||
|
||||
# 1) Copy mod files first for better caching, include both go.mod and go.sum
|
||||
# 1) Cache modules
|
||||
COPY backend/go.mod backend/go.sum ./
|
||||
# 2) Warm module cache
|
||||
RUN --mount=type=cache,target=/go/pkg/mod go mod download
|
||||
|
||||
# 3) Copy the rest of the backend sources
|
||||
# 2) Source
|
||||
COPY backend/ .
|
||||
|
||||
# 4) Bring in the FE assets where the embed expects them
|
||||
# (your code likely has: //go:embed web/dist/**)
|
||||
# 3) FE assets where the embed expects them (//go:embed web/dist/**)
|
||||
COPY --from=fe /out ./web/dist
|
||||
|
||||
# 5) In case code imports added deps not present during step (1), tidy now
|
||||
# 4) Tidy (in case new deps appeared)
|
||||
RUN --mount=type=cache,target=/go/pkg/mod go mod tidy
|
||||
|
||||
# 6) Build the binary; fail if go build fails. Allow UPX to fail harmlessly.
|
||||
# 5) Build the binary; fail if build fails; allow UPX to fail only.
|
||||
RUN --mount=type=cache,target=/go/pkg/mod \
|
||||
go build -trimpath -ldflags="-s -w" -o /pegasus ./main.go && \
|
||||
upx -q --lzma /pegasus || true
|
||||
set -eux; \
|
||||
mkdir -p /out; \
|
||||
go build -trimpath -ldflags="-s -w" -o /out/pegasus ./main.go; \
|
||||
test -f /out/pegasus; \
|
||||
upx -q --lzma /out/pegasus || true
|
||||
|
||||
############################
|
||||
# Final, minimal image
|
||||
############################
|
||||
FROM gcr.io/distroless/static:nonroot AS final
|
||||
COPY --from=be /pegasus /pegasus
|
||||
COPY --from=be /out/pegasus /pegasus
|
||||
USER nonroot:nonroot
|
||||
ENTRYPOINT ["/pegasus"]
|
||||
|
||||
@ -45,9 +45,19 @@ type loggingRW struct {
|
||||
status int
|
||||
}
|
||||
|
||||
type listEntry struct {
|
||||
Name string `json:"name"`
|
||||
Path string `json:"path"`
|
||||
IsDir bool `json:"is_dir"`
|
||||
Size int64 `json:"size"`
|
||||
Mtime int64 `json:"mtime"`
|
||||
}
|
||||
|
||||
func writeJSON(w http.ResponseWriter, v any) {
|
||||
w.Header().Set("Content-Type", "application/json")
|
||||
_ = json.NewEncoder(w).Encode(v)
|
||||
if err := json.NewEncoder(w).Encode(v); err != nil {
|
||||
http.Error(w, err.Error(), http.StatusInternalServerError)
|
||||
}
|
||||
}
|
||||
|
||||
func (l *loggingRW) WriteHeader(code int) { l.status = code; l.ResponseWriter.WriteHeader(code) }
|
||||
@ -233,14 +243,6 @@ func main() {
|
||||
|
||||
// list entries
|
||||
r.Get("/api/list", func(w http.ResponseWriter, r *http.Request) {
|
||||
type entry struct {
|
||||
Name string `json:"name"`
|
||||
Path string `json:"path"`
|
||||
IsDir bool `json:"is_dir"`
|
||||
Size int64 `json:"size"`
|
||||
Mtime int64 `json:"mtime"`
|
||||
}
|
||||
|
||||
cl, err := internal.CurrentUser(r)
|
||||
if err != nil {
|
||||
http.Error(w, "unauthorized", http.StatusUnauthorized)
|
||||
@ -248,11 +250,14 @@ func main() {
|
||||
}
|
||||
rootRel, err := um.Resolve(cl.Username)
|
||||
if err != nil {
|
||||
internal.Logf("mkdir map missing for %q", cl.Username)
|
||||
http.Error(w, "no mapping", http.StatusForbidden); return
|
||||
internal.Logf("list: map missing for %q", cl.Username)
|
||||
http.Error(w, "no mapping", http.StatusForbidden)
|
||||
return
|
||||
}
|
||||
|
||||
q := strings.TrimPrefix(r.URL.Query().Get("path"), "/")
|
||||
rootAbs, _ := internal.SafeJoin(mediaRoot, rootRel)
|
||||
|
||||
var dirAbs string
|
||||
if q == "" {
|
||||
dirAbs = rootAbs
|
||||
@ -263,40 +268,36 @@ func main() {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
ents, err := os.ReadDir(dirAbs)
|
||||
if err != nil {
|
||||
http.Error(w, err.Error(), http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
type entry struct {
|
||||
Name string
|
||||
Path string
|
||||
IsDir bool
|
||||
Size int64
|
||||
Mtime int64
|
||||
}
|
||||
var out []entry
|
||||
|
||||
out := make([]listEntry, 0, len(ents))
|
||||
for _, d := range ents {
|
||||
info, _ := d.Info()
|
||||
out = append(out, entry{
|
||||
|
||||
var size int64
|
||||
if info != nil && !d.IsDir() {
|
||||
size = info.Size()
|
||||
}
|
||||
var mtime int64
|
||||
if info != nil {
|
||||
mtime = info.ModTime().Unix()
|
||||
}
|
||||
|
||||
out = append(out, listEntry{
|
||||
Name: d.Name(),
|
||||
Path: filepath.Join(q, d.Name()),
|
||||
IsDir: d.IsDir(),
|
||||
Size: func() int64 {
|
||||
if info != nil && !d.IsDir() {
|
||||
return info.Size()
|
||||
}
|
||||
return 0
|
||||
}(),
|
||||
Mtime: func() int64 {
|
||||
if info != nil {
|
||||
return info.ModTime().Unix()
|
||||
}
|
||||
return 0
|
||||
}(),
|
||||
Size: size,
|
||||
Mtime: mtime,
|
||||
})
|
||||
}
|
||||
writeJSON(w, out)
|
||||
|
||||
writeJSON(w, out)
|
||||
})
|
||||
|
||||
// rename
|
||||
|
||||
@ -1,13 +1,24 @@
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
// frontend/src/Uploader.tsx
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { api, WhoAmI } from './api'
|
||||
import * as tus from 'tus-js-client'
|
||||
|
||||
type FileRow = { name: string; path: string; is_dir: boolean; size: number; mtime: number }
|
||||
type Sel = { file: File; desc: string; date: string; finalName: string; progress?: number; err?: string }
|
||||
const [mobile, setMobile] = useState<boolean>(false)
|
||||
useEffect(()=>{ setMobile(isLikelyMobile()) }, [])
|
||||
|
||||
// Simple bundle heartbeat so you can confirm the loaded JS is current
|
||||
console.log('[Pegasus] FE bundle activated at', new Date().toISOString())
|
||||
|
||||
function isLikelyMobile(): boolean {
|
||||
if (typeof window === 'undefined') return false
|
||||
const ua = navigator.userAgent || ''
|
||||
const touch = window.matchMedia && window.matchMedia('(pointer: coarse)').matches
|
||||
// catch Android/iOS/iPadOS
|
||||
return touch || /Mobi|Android|iPhone|iPad|iPod/i.test(ua)
|
||||
}
|
||||
|
||||
function sanitizeDesc(s:string){
|
||||
s = s.trim().replace(/[^A-Za-z0-9 _-]+/g,'_').replace(/\s+/g,'_')
|
||||
if(!s) s = 'upload'
|
||||
@ -19,37 +30,87 @@ function composeName(date:string, desc:string, orig:string){
|
||||
const [Y,M,D] = d.split('-'); return `${Y}.${M}.${D}.${sanitizeDesc(desc)}.${extOf(orig)}`
|
||||
}
|
||||
|
||||
// Type guard to narrow tus error
|
||||
// Narrow tus error
|
||||
function isDetailedError(e: unknown): e is tus.DetailedError {
|
||||
return typeof e === 'object' && e !== null && ('originalRequest' in (e as any) || 'originalResponse' in (e as any))
|
||||
}
|
||||
|
||||
// Normalize API list rows (works with old CamelCase or new snake_case)
|
||||
function normalizeRows(raw: any): FileRow[] {
|
||||
if (!Array.isArray(raw)) return []
|
||||
return raw.map((r: any) => ({
|
||||
name: r?.name ?? r?.Name ?? '',
|
||||
path: r?.path ?? r?.Path ?? '',
|
||||
is_dir: typeof r?.is_dir === 'boolean' ? r.is_dir
|
||||
: typeof r?.IsDir === 'boolean' ? r.IsDir
|
||||
: false,
|
||||
size: typeof r?.size === 'number' ? r.size : (typeof r?.Size === 'number' ? r.Size : 0),
|
||||
mtime: typeof r?.mtime === 'number' ? r.mtime : (typeof r?.Mtime === 'number' ? r.Mtime : 0),
|
||||
})).filter(r => r && typeof r.name === 'string' && typeof r.path === 'string')
|
||||
}
|
||||
|
||||
// simple mobile detection (no CSS change needed)
|
||||
function useIsMobile() {
|
||||
const [isMobile, setIsMobile] = useState(false)
|
||||
useEffect(() => {
|
||||
const mq = window.matchMedia('(max-width: 640px)')
|
||||
const handler = (e: MediaQueryListEvent | MediaQueryList) =>
|
||||
setIsMobile(('matches' in e ? e.matches : (e as MediaQueryList).matches))
|
||||
handler(mq)
|
||||
mq.addEventListener('change', handler as any)
|
||||
return () => mq.removeEventListener('change', handler as any)
|
||||
}, [])
|
||||
return isMobile
|
||||
}
|
||||
|
||||
export default function Uploader(){
|
||||
const [me, setMe] = useState<WhoAmI|undefined>()
|
||||
const [cwd, setCwd] = useState<string>('') // relative to user's mapped root
|
||||
const [libraries, setLibraries] = useState<string[]>([]) // from whoami.roots or [whoami.root]
|
||||
const [selectedLib, setSelectedLib] = useState<string>('') // must be chosen to upload
|
||||
|
||||
const [subdir, setSubdir] = useState<string>('') // one-level subfolder name (no '/')
|
||||
const [rows, setRows] = useState<FileRow[]>([])
|
||||
const destPath = `/${[me?.root, cwd].filter(Boolean).join('/')}`
|
||||
const destPath = `/${[selectedLib, subdir].filter(Boolean).join('/')}`
|
||||
|
||||
const [status, setStatus] = useState<string>('')
|
||||
const [globalDate, setGlobalDate] = useState<string>(new Date().toISOString().slice(0,10))
|
||||
const [uploading, setUploading] = useState<boolean>(false)
|
||||
const [sel, setSel] = useState<Sel[]>([])
|
||||
const folderInputRef = useRef<HTMLInputElement>(null) // to set webkitdirectory
|
||||
const isMobile = useIsMobile()
|
||||
|
||||
// Enable directory selection on the folder picker (non-standard attr)
|
||||
useEffect(() => {
|
||||
const el = folderInputRef.current
|
||||
if (el) {
|
||||
if (!el) return
|
||||
if (mobile) {
|
||||
// ensure we don't accidentally force folder mode on mobile
|
||||
el.removeAttribute('webkitdirectory')
|
||||
el.removeAttribute('directory')
|
||||
} else {
|
||||
el.setAttribute('webkitdirectory','')
|
||||
el.setAttribute('directory','')
|
||||
}
|
||||
}, [])
|
||||
}, [mobile])
|
||||
|
||||
// Fetch whoami + list
|
||||
async function refresh(path=''){
|
||||
try {
|
||||
const m = await api<WhoAmI>('/api/whoami'); setMe(m)
|
||||
const list = await api<FileRow[]>('/api/list?path='+encodeURIComponent(path))
|
||||
setRows(list); setCwd(path)
|
||||
setStatus(`Ready · Destination: /${[m.root, path].filter(Boolean).join('/')}`)
|
||||
const m = await api<any>('/api/whoami')
|
||||
setMe(m as WhoAmI)
|
||||
|
||||
const libs: string[] =
|
||||
Array.isArray(m?.roots) && m.roots.length ? m.roots.slice()
|
||||
: m?.root ? [m.root] : []
|
||||
|
||||
setLibraries(libs)
|
||||
// Auto-select if exactly one library
|
||||
setSelectedLib(prev => prev || (libs.length === 1 ? libs[0] : ''))
|
||||
|
||||
const listRaw = await api<any>('/api/list?path='+encodeURIComponent(path))
|
||||
const list = normalizeRows(listRaw)
|
||||
setRows(list); setSubdir(path)
|
||||
setStatus(`Ready · Destination: /${[libs[0] ?? '', path].filter(Boolean).join('/')}`)
|
||||
console.log('[Pegasus] list ok', { path, count: list.length })
|
||||
} catch (e:any) {
|
||||
const msg = String(e?.message || e || '')
|
||||
@ -75,7 +136,7 @@ export default function Uploader(){
|
||||
setSel(arr)
|
||||
}
|
||||
|
||||
// When the global date changes, recompute per-file finalName (leave per-file date in place)
|
||||
// When the global date changes, recompute per-file finalName
|
||||
useEffect(()=>{
|
||||
setSel(old => old.map(x=> ({...x, date: globalDate, finalName: composeName(globalDate, x.desc, x.file.name)})))
|
||||
}, [globalDate])
|
||||
@ -88,9 +149,12 @@ export default function Uploader(){
|
||||
|
||||
async function doUpload(){
|
||||
if(!me) { setStatus('Not signed in'); return }
|
||||
if(!selectedLib){ alert('Please select a Library to upload to.'); return }
|
||||
if(sel.some(s => !s.desc.trim())){ alert('Please provide a brief description for every file.'); return }
|
||||
|
||||
setStatus('Starting upload…')
|
||||
setUploading(true)
|
||||
|
||||
try{
|
||||
for(const s of sel){
|
||||
// eslint-disable-next-line no-await-in-loop
|
||||
@ -99,11 +163,16 @@ export default function Uploader(){
|
||||
endpoint: '/tus/',
|
||||
chunkSize: 5*1024*1024,
|
||||
retryDelays: [0, 1000, 3000, 5000, 10000],
|
||||
resume: false, // ignore any old http:// resume URLs
|
||||
removeFingerprintOnSuccess: true, // keep storage clean going forward
|
||||
// Avoid resuming old HTTP URLs: don't store fingerprints, and use a random fingerprint so nothing matches
|
||||
storeFingerprintForResuming: false,
|
||||
removeFingerprintOnSuccess: true,
|
||||
fingerprint: (async () => `${Date.now()}-${Math.random().toString(36).slice(2)}-${s.file.name}`) as any,
|
||||
|
||||
metadata: {
|
||||
filename: s.file.name,
|
||||
subdir: cwd || "",
|
||||
// Server treats this as a subdirectory under the user's mapped root.
|
||||
// When backend supports multiple libraries, it will also need the selected library.
|
||||
subdir: subdir || "",
|
||||
date: s.date, // per-file YYYY-MM-DD
|
||||
desc: s.desc // server composes final
|
||||
},
|
||||
@ -136,27 +205,27 @@ export default function Uploader(){
|
||||
opts.withCredentials = true
|
||||
|
||||
const up = new tus.Upload(s.file, opts)
|
||||
console.log('[Pegasus] tus.start', { name: s.file.name, size: s.file.size, type: s.file.type, cwd })
|
||||
console.log('[Pegasus] tus.start', { name: s.file.name, size: s.file.size, type: s.file.type, subdir })
|
||||
up.start()
|
||||
})
|
||||
}
|
||||
setStatus('All uploads complete')
|
||||
setSel([])
|
||||
await refresh(cwd)
|
||||
await refresh(subdir)
|
||||
} finally {
|
||||
setUploading(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function rename(oldp:string){
|
||||
const name = prompt('New name (YYYY.MM.DD.description.ext):', oldp.split('/').pop()||''); if(!name) return
|
||||
const name = prompt('New name (YYYY.MM.DD.description.ext for files, or folder name):', oldp.split('/').pop()||''); if(!name) return
|
||||
try{
|
||||
await api('/api/rename', {
|
||||
method:'POST',
|
||||
headers:{'content-type':'application/json'},
|
||||
body: JSON.stringify({from:oldp, to: (oldp.split('/').slice(0,-1).concat(name)).join('/')})
|
||||
})
|
||||
await refresh(cwd)
|
||||
await refresh(subdir)
|
||||
} catch(e:any){
|
||||
console.error('[Pegasus] rename error', e)
|
||||
alert(`Rename failed:\n${e?.message || e}`)
|
||||
@ -167,7 +236,7 @@ export default function Uploader(){
|
||||
if(!confirm(`Delete ${p}${recursive?' (recursive)':''}?`)) return
|
||||
try{
|
||||
await api('/api/file?path='+encodeURIComponent(p)+'&recursive='+(recursive?'true':'false'), { method:'DELETE' })
|
||||
await refresh(cwd)
|
||||
await refresh(subdir)
|
||||
} catch(e:any){
|
||||
console.error('[Pegasus] delete error', e)
|
||||
alert(`Delete failed:\n${e?.message || e}`)
|
||||
@ -175,50 +244,111 @@ export default function Uploader(){
|
||||
}
|
||||
|
||||
function goUp(){
|
||||
const up = cwd.split('/').slice(0,-1).join('/')
|
||||
setCwd(up); void refresh(up)
|
||||
setSubdir(''); void refresh('')
|
||||
}
|
||||
|
||||
// Precompute a safely sorted copy for rendering (no in-place mutation)
|
||||
const rowsSorted = useMemo(() => {
|
||||
const copy = Array.isArray(rows) ? [...rows] : []
|
||||
return copy
|
||||
.filter(r => r && typeof r.name === 'string')
|
||||
.sort((a, b) => (Number(b.is_dir) - Number(a.is_dir)) || a.name.localeCompare(b.name))
|
||||
}, [rows])
|
||||
|
||||
// Restrict to one-level: only allow "Open" when we're at library root (subdir === '')
|
||||
const canOpenDeeper = subdir === ''
|
||||
|
||||
return (<>
|
||||
<section className="card">
|
||||
<div style={{display:'flex', justifyContent:'space-between', alignItems:'center', gap:8, flexWrap:'wrap'}}>
|
||||
<div><b>Signed in:</b> {me?.username} · <span className="meta">root: /{me?.root}</span></div>
|
||||
<div className="meta">Destination: <b>{destPath || '/(unknown)'}</b></div>
|
||||
<div><b>Signed in:</b> {me?.username}</div>
|
||||
<div className="meta">Destination: <b>{destPath || '/(select a library)'}</b></div>
|
||||
</div>
|
||||
|
||||
{/* Destination (Library + Subfolder) */}
|
||||
<div className="grid" style={{alignItems:'end'}}>
|
||||
<div>
|
||||
<label className="meta">Library</label>
|
||||
{libraries.length <= 1 ? (
|
||||
<div className="item" style={{padding:10}}>
|
||||
<span>{libraries[0] || '(none)'}</span>
|
||||
</div>
|
||||
) : (
|
||||
<select
|
||||
value={selectedLib}
|
||||
onChange={e=> setSelectedLib(e.target.value)}
|
||||
style={{border:'1px solid #2a2f45', background:'#1c2138', color:'var(--fg)', borderRadius:8, padding:10, width:'100%'}}
|
||||
>
|
||||
<option value="" disabled>Choose a library…</option>
|
||||
{libraries.map(lib => <option key={lib} value={lib}>{lib}</option>)}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="meta">Default date (applied to new selections)</label>
|
||||
<input type="date" value={globalDate} onChange={e=> setGlobalDate(e.target.value)} />
|
||||
</div>
|
||||
|
||||
{/* Pickers: mobile vs desktop */}
|
||||
<div style={{display:'flex', gap:8, flexWrap:'wrap'}}>
|
||||
<div>
|
||||
<label className="meta">Gallery/Photos</label>
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
accept="image/*,video/*"
|
||||
capture="environment"
|
||||
onChange={e=> e.target.files && handleChoose(e.target.files)}
|
||||
/>
|
||||
</div>
|
||||
<div className="hide-on-mobile">
|
||||
<label className="meta">Files/Folders</label>
|
||||
{/* set webkitdirectory/directory via ref to satisfy TS */}
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
ref={folderInputRef}
|
||||
onChange={e=> e.target.files && handleChoose(e.target.files)}
|
||||
/>
|
||||
</div>
|
||||
{mobile ? (
|
||||
// ---- Mobile: show a Gallery picker (no capture) + optional Camera quick-capture
|
||||
<>
|
||||
<div>
|
||||
<label className="meta">Gallery/Photos</label>
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
// no "capture" -> browsers tend to open Photo/Media picker instead of camera or filesystem
|
||||
accept="image/*,video/*"
|
||||
onChange={e => e.target.files && handleChoose(e.target.files)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="meta">Camera (optional)</label>
|
||||
<input
|
||||
type="file"
|
||||
// keeping this separate provides a clear way to open the camera immediately if desired
|
||||
accept="image/*,video/*"
|
||||
capture="environment"
|
||||
onChange={e => e.target.files && handleChoose(e.target.files)}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
// ---- Desktop: show both Files and Folder(s) pickers
|
||||
<>
|
||||
<div>
|
||||
<label className="meta">Select file(s)</label>
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
accept="image/*,video/*"
|
||||
onChange={e => e.target.files && handleChoose(e.target.files)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="meta">Select folder(s)</label>
|
||||
{/* set webkitdirectory/directory via ref (done in useEffect) */}
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
ref={folderInputRef}
|
||||
onChange={e => e.target.files && handleChoose(e.target.files)}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
{(() => {
|
||||
const uploadDisabled = !sel.length || uploading || sel.some(s=>!s.desc.trim())
|
||||
const uploadDisabled =
|
||||
!selectedLib || !sel.length || uploading || sel.some(s=>!s.desc.trim())
|
||||
let disabledReason = ''
|
||||
if (!sel.length) disabledReason = 'Select at least one file.'
|
||||
if (!selectedLib) disabledReason = 'Pick a library.'
|
||||
else if (!sel.length) disabledReason = 'Select at least one file.'
|
||||
else if (uploading) disabledReason = 'Upload in progress…'
|
||||
else if (sel.some(s=>!s.desc.trim())) disabledReason = 'Add a short description for every file.'
|
||||
|
||||
@ -243,6 +373,7 @@ export default function Uploader(){
|
||||
})()}
|
||||
</div>
|
||||
|
||||
{/* Per-file editor */}
|
||||
{sel.length>0 && (
|
||||
<div className="card">
|
||||
<h4>Ready to upload</h4>
|
||||
@ -287,35 +418,72 @@ export default function Uploader(){
|
||||
<div className="meta" style={{marginTop:8}}>{status}</div>
|
||||
</section>
|
||||
|
||||
{/* Destination details and subfolder management */}
|
||||
<section className="card">
|
||||
<h3>Folder</h3>
|
||||
{rows.length === 0 ? (
|
||||
<h3>Destination</h3>
|
||||
|
||||
{/* Current subfolder header & actions (one level only) */}
|
||||
<div className="item" style={{display:'flex', gap:12, alignItems:'center', justifyContent:'space-between', flexWrap:'wrap'}}>
|
||||
<div className="meta">
|
||||
Library: <b>{selectedLib || '(none)'}</b>
|
||||
{' · '}
|
||||
Subfolder: <b>{subdir ? subdir : '(root)'}</b>
|
||||
</div>
|
||||
<div className="meta">
|
||||
{subdir && (
|
||||
<>
|
||||
<a href="#" onClick={(e)=>{e.preventDefault(); void rename(subdir)}}>Rename subfolder</a>
|
||||
{' · '}
|
||||
<a className="bad" href="#" onClick={(e)=>{e.preventDefault(); void del(subdir, true)}}>Delete subfolder</a>
|
||||
{' · '}
|
||||
</>
|
||||
)}
|
||||
{subdir && <a href="#" onClick={(e)=>{e.preventDefault(); goUp()}}>⬆ Up to library root</a>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Create subfolder (root only) */}
|
||||
{!subdir && (
|
||||
<CreateFolder
|
||||
cwd={''}
|
||||
onCreate={(p)=>{ setSubdir(p); void refresh(p) }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Listing */}
|
||||
{rowsSorted.length === 0 ? (
|
||||
<div className="item">
|
||||
<div className="meta">
|
||||
No items to show here. You’ll upload into <b>{destPath}</b>.
|
||||
No items to show here. You’ll upload into <b>{destPath || '/(select a library)'}</b>.
|
||||
</div>
|
||||
<CreateFolder cwd={cwd} onCreate={(p)=>{ setCwd(p); void refresh(p) }} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid">
|
||||
{cwd && (
|
||||
<div className="item">
|
||||
<a className="name" href="#" onClick={(e)=>{e.preventDefault(); goUp()}}>⬆ Up</a>
|
||||
</div>
|
||||
)}
|
||||
{rows.sort((a,b)=> (Number(b.is_dir)-Number(a.is_dir)) || a.name.localeCompare(b.name)).map(f=>
|
||||
<div key={f.path} className="item">
|
||||
<div className="name">{f.is_dir?'📁':'🎞️'} {f.name}</div>
|
||||
<div className="meta">{f.is_dir?'folder':fmt(f.size)} · {new Date(f.mtime*1000).toLocaleString()}</div>
|
||||
<div className="meta">
|
||||
{f.is_dir
|
||||
? (<><a href="#" onClick={(e)=>{e.preventDefault(); setCwd(f.path); void refresh(f.path)}}>Open</a> · <a href="#" onClick={(e)=>{e.preventDefault(); void rename(f.path)}}>Rename</a> · <a className="bad" href="#" onClick={(e)=>{e.preventDefault(); void del(f.path,true)}}>Delete</a></>)
|
||||
: (<><a href="#" onClick={(e)=>{e.preventDefault(); void rename(f.path)}}>Rename</a> · <a className="bad" href="#" onClick={(e)=>{e.preventDefault(); void del(f.path,false)}}>Delete</a></>)
|
||||
}
|
||||
<div className="grid">
|
||||
{/* Only show "Open" when at library root to enforce one-level depth */}
|
||||
{rowsSorted.map(f =>
|
||||
<div key={f.path} className="item">
|
||||
<div className="name">{f.is_dir?'📁':'🎞️'} {f.name}</div>
|
||||
<div className="meta">{f.is_dir?'folder':fmt(f.size)} · {new Date(f.mtime*1000).toLocaleString()}</div>
|
||||
<div className="meta">
|
||||
{f.is_dir ? (
|
||||
<>
|
||||
{canOpenDeeper
|
||||
? <a href="#" onClick={(e)=>{e.preventDefault(); setSubdir(f.path); void refresh(f.path)}}>Open</a>
|
||||
: <span className="meta">Open (disabled)</span>
|
||||
}
|
||||
{' · '}<a href="#" onClick={(e)=>{e.preventDefault(); void rename(f.path)}}>Rename</a>
|
||||
{' · '}<a className="bad" href="#" onClick={(e)=>{e.preventDefault(); void del(f.path,true)}}>Delete</a>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<a href="#" onClick={(e)=>{e.preventDefault(); void rename(f.path)}}>Rename</a>
|
||||
{' · '}<a className="bad" href="#" onClick={(e)=>{e.preventDefault(); void del(f.path,false)}}>Delete</a>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</>)
|
||||
@ -326,7 +494,9 @@ function fmt(n:number){ if(n<1024) return n+' B'; const u=['KB','MB','GB','TB'];
|
||||
function CreateFolder({ cwd, onCreate }:{ cwd:string; onCreate:(p:string)=>void }) {
|
||||
const [name, setName] = React.useState('');
|
||||
async function submit() {
|
||||
const clean = name.trim().replace(/[\/]+/g,'/').replace(/^\//,'').replace(/[^\w\-\s.]/g,'_');
|
||||
// single-level only
|
||||
let clean = name.trim().replace(/[\/]+/g,'').replace(/[^\w\-\s.]/g,'_')
|
||||
clean = clean.replace(/\s+/g,'_')
|
||||
if (!clean) return;
|
||||
const path = [cwd, clean].filter(Boolean).join('/');
|
||||
console.log('[Pegasus] mkdir click', { path })
|
||||
@ -341,7 +511,7 @@ function CreateFolder({ cwd, onCreate }:{ cwd:string; onCreate:(p:string)=>void
|
||||
}
|
||||
return (
|
||||
<div style={{marginTop:10, display:'flex', gap:8, alignItems:'center'}}>
|
||||
<input placeholder="New folder name" value={name} onChange={e=>setName(e.target.value)} />
|
||||
<input placeholder="New subfolder name (one-level)" value={name} onChange={e=>setName(e.target.value)} />
|
||||
<button type="button" className="btn" onClick={submit} disabled={!name.trim()}>Create</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user