generated from coulomb/repo-seed
feat: add folder picker for automatic project file loading
- Add "Load Project Folder" button with folder selection (webkitdirectory) - Automatically load all project files (JSON, CSV, SVG, CSS) from selected folder - Eliminate need to manually upload each file individually - Show clear errors if referenced files are missing from folder - Update all documentation to explain folder picker usage This solves the browser security limitation where uploading a single project.json doesn't allow automatic access to other files in the same directory. Users can now select an entire project folder and all files load automatically in one click. Changes: - index.html: Add folder input with webkitdirectory attribute and UI - engine.js: Add folderInput event handler to process all files from folder - README.md: Document folder picker as primary loading method - WINDOWS_USAGE.md: Add folder picker as recommended Option 1 - TROUBLESHOOTING.md: Add section explaining project files not auto-loading - CLAUDE.md: Document folder picker architecture for future instances - Makefile: Update DIST_README.md template to mention folder picker Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
17
index.html
17
index.html
@@ -239,6 +239,23 @@
|
||||
<div id="fileManager" style="margin-bottom:16px; padding:16px; background:#f8f9fa; border:1px solid #e9ecef; border-radius:8px;">
|
||||
<h3 style="margin:0 0 12px 0; font-size:14px; font-weight:600; color:#495057;">Project Files</h3>
|
||||
|
||||
<!-- Quick Load: Project Folder -->
|
||||
<div style="margin-bottom:16px; padding:12px; background:#e7f3ff; border:1px solid #b3d9ff; border-radius:6px;">
|
||||
<div style="display:flex; align-items:center; gap:12px;">
|
||||
<label class="upload-btn" style="background:#0066cc; flex-shrink:0;">
|
||||
<input type="file" id="folderInput" webkitdirectory directory multiple style="display:none;" />
|
||||
📂 Load Project Folder
|
||||
</label>
|
||||
<span style="font-size:12px; color:#004080;">
|
||||
Select an entire project folder to load all files automatically
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin:0 0 12px 0; text-align:center; color:#6c757d; font-size:12px;">
|
||||
— or load files individually —
|
||||
</div>
|
||||
|
||||
<div class="file-grid" style="display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:12px; margin-bottom:16px;">
|
||||
<div class="file-item">
|
||||
<div class="file-header">
|
||||
|
||||
Reference in New Issue
Block a user