Hugging Face's logo

Spaces:
moonlantern1
/
clipforge
Sleeping

App Files Community
moonlantern1 commited on
Commit
72f119a
·
verified ·
1 Parent(s): eda316b

Fix upload file picker

Browse files
Files changed (1) hide show
  1. app.py +4 -3
app.py CHANGED
@@ -472,6 +472,7 @@ INDEX_HTML = r"""<!DOCTYPE html>
472
  .yt-input:focus { border-color: var(--gold); } .yt-input::placeholder { color: var(--ink-muted); }
473
  .upload-zone { border: 2px dashed var(--champagne-deep); border-radius: var(--radius); padding: 36px 20px; text-align: center; cursor: pointer; transition: all 0.2s; background: var(--cream); }
474
  .upload-zone:hover, .upload-zone.dragover { border-color: var(--gold); background: var(--champagne); }
 
475
  .upload-icon { width: 44px; height: 44px; background: var(--champagne); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 1.2rem; }
476
  .upload-text { font-size: 0.9rem; color: var(--ink-soft); font-weight: 400; }
477
  .upload-sub { font-size: 0.78rem; color: var(--ink-muted); margin-top: 4px; }
@@ -563,12 +564,12 @@ INDEX_HTML = r"""<!DOCTYPE html>
563
  <input class="yt-input" type="text" placeholder="https://youtube.com/watch?v=..." id="yt-url">
564
  </div>
565
  <div class="input-section" id="mode-upload">
566
- <input type="file" id="file-input" accept="video/mp4,video/quicktime,video/*" hidden>
567
- <div class="upload-zone" id="upload-zone" onclick="openUpload()">
568
  <div class="upload-icon">File</div>
569
  <div class="upload-text">Click to browse or drag & drop</div>
570
  <div class="upload-sub">MP4, MOV, AVI - up to your Space limit</div>
571
- </div>
572
  </div>
573
  <button class="convert-btn" id="convert-btn" onclick="startProcessing()">Convert to Clips -></button>
574
  </div>
 
472
  .yt-input:focus { border-color: var(--gold); } .yt-input::placeholder { color: var(--ink-muted); }
473
  .upload-zone { border: 2px dashed var(--champagne-deep); border-radius: var(--radius); padding: 36px 20px; text-align: center; cursor: pointer; transition: all 0.2s; background: var(--cream); }
474
  .upload-zone:hover, .upload-zone.dragover { border-color: var(--gold); background: var(--champagne); }
475
+ .file-input-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
476
  .upload-icon { width: 44px; height: 44px; background: var(--champagne); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 1.2rem; }
477
  .upload-text { font-size: 0.9rem; color: var(--ink-soft); font-weight: 400; }
478
  .upload-sub { font-size: 0.78rem; color: var(--ink-muted); margin-top: 4px; }
 
564
  <input class="yt-input" type="text" placeholder="https://youtube.com/watch?v=..." id="yt-url">
565
  </div>
566
  <div class="input-section" id="mode-upload">
567
+ <input class="file-input-visually-hidden" type="file" id="file-input" accept="video/mp4,video/quicktime,video/*">
568
+ <label class="upload-zone" id="upload-zone" for="file-input">
569
  <div class="upload-icon">File</div>
570
  <div class="upload-text">Click to browse or drag & drop</div>
571
  <div class="upload-sub">MP4, MOV, AVI - up to your Space limit</div>
572
+ </label>
573
  </div>
574
  <button class="convert-btn" id="convert-btn" onclick="startProcessing()">Convert to Clips -></button>
575
  </div>