Hugging Face's logo

Spaces:
chatyou
/
filebed
Running

App Files Community
chatyou commited on
Commit
43d4ad0
·
verified ·
1 Parent(s): 5242f58

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +68 -3
app.py CHANGED
@@ -291,7 +291,25 @@ HTML_CONTENT = """<!DOCTYPE html>
291
  <h1 style="font-size: 2.5rem; margin-bottom: 2rem; color: #0f172a;">📦 HF Bucket 文件管理器 (目录导航)</h1>
292
  <div class="grid">
293
  <!-- 左侧：文件上传与浏览 -->
294
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
295
 
296
  <!-- 右侧：API 测试面板 + 使用说明 -->
297
  <div class="card">
@@ -630,7 +648,54 @@ fetch(`/delete/${encodeURIComponent(filename)}`, { method: 'DELETE' })
630
  }
631
 
632
  // 左侧文件选择显示
633
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
634
 
635
  // API 测试：上传文件
636
  apiUploadBtn.addEventListener('click', async () => {
@@ -671,7 +736,7 @@ fetch(`/delete/${encodeURIComponent(filename)}`, { method: 'DELETE' })
671
  if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
672
  showApiResult(data);
673
  // 同时更新左侧浏览目录为相同目录并刷新
674
- //loadList(dir);
675
  } catch (err) {
676
  showApiResult(err.message, true);
677
  }
 
291
  <h1 style="font-size: 2.5rem; margin-bottom: 2rem; color: #0f172a;">📦 HF Bucket 文件管理器 (目录导航)</h1>
292
  <div class="grid">
293
  <!-- 左侧：文件上传与浏览 -->
294
+ <div class="card">
295
+ <h2>📤 文件上传</h2>
296
+ <div class="upload-area">
297
+ <label for="fileInput" class="file-label" id="fileLabel">📎 选择文件</label>
298
+ <input type="file" id="fileInput">
299
+ <input type="text" id="uploadDir" class="dir-input" placeholder="目标目录 (可选，如 images/ 或 logs/2026/)" value="">
300
+ <button class="button" id="uploadBtn">⬆️ 上传到 Bucket</button>
301
+ </div>
302
+ <h2 style="margin-top: 2rem;">📁 浏览</h2>
303
+ <div class="nav-bar">
304
+ <input type="text" id="currentDir" class="dir-input" placeholder="当前目录 (留空为根目录)" value="">
305
+ <button class="button secondary small" id="listBtn">列出文件</button>
306
+ <button class="button secondary small" id="goUpBtn" title="返回上级">⬆️ 上级</button>
307
+ </div>
308
+ <div id="fileList" class="file-list">
309
+ <div class="empty-message">加载中...</div>
310
+ </div>
311
+ <div class="log" id="log">就绪</div>
312
+ </div>
313
 
314
  <!-- 右侧：API 测试面板 + 使用说明 -->
315
  <div class="card">
 
648
  }
649
 
650
  // 左侧文件选择显示
651
+ fileInput.addEventListener('change', function() {
652
+ if (fileInput.files.length > 0) {
653
+ fileLabel.textContent = '📄 ' + fileInput.files[0].name;
654
+ } else {
655
+ fileLabel.textContent = '📎 选择文件';
656
+ }
657
+ });
658
+
659
+ // 左侧上传按钮
660
+ uploadBtn.addEventListener('click', async () => {
661
+ const file = fileInput.files[0];
662
+ if (!file) { alert('请选择文件'); return; }
663
+
664
+ const dir = uploadDir.value;
665
+ const remotePath = buildRemotePath(dir, file.name);
666
+
667
+ clearLog();
668
+ addLog('开始上传到: ' + remotePath);
669
+ uploadBtn.disabled = true;
670
+
671
+ const formData = new FormData();
672
+ formData.append('file', file);
673
+ formData.append('dir', dir);
674
+
675
+ try {
676
+ const res = await fetch('/upload', { method: 'POST', body: formData });
677
+ const data = await res.json();
678
+ if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
679
+ addLog('✅ 上传成功！路径: ' + data.filename);
680
+ fileInput.value = '';
681
+ fileLabel.textContent = '📎 选择文件';
682
+ uploadDir.value = '';
683
+ // 上传后刷新当前目录
684
+ loadList(currentDir.value);
685
+ } catch (err) {
686
+ addLog('❌ ' + err.message, true);
687
+ } finally {
688
+ uploadBtn.disabled = false;
689
+ }
690
+ });
691
+
692
+ // 列出文件按钮
693
+ listBtn.addEventListener('click', () => {
694
+ loadList(currentDir.value.trim());
695
+ });
696
+
697
+ // 返回上级按钮
698
+ goUpBtn.addEventListener('click', goUp);
699
 
700
  // API 测试：上传文件
701
  apiUploadBtn.addEventListener('click', async () => {
 
736
  if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
737
  showApiResult(data);
738
  // 同时更新左侧浏览目录为相同目录并刷新
739
+ loadList(dir);
740
  } catch (err) {
741
  showApiResult(err.message, true);
742
  }