coulomb/timeline-svg
2
0
Fork 0
generated from coulomb/repo-seed
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add folder picker for automatic project file loading

Browse Source 
- 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:
Bernd Worsch
2026-01-23 16:34:35 +01:00
parent 39037587ba
commit cefbf96a82
7 changed files with 180 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
Makefile
View File

@@ -204,12 +204,14 @@ dist:
@echo "1. Double-click \`start-server.bat\`" >> dist/DIST_README.md
@echo "2. Your browser will open automatically at http://localhost:8000" >> dist/DIST_README.md
@echo "3. The application will load the example project automatically" >> dist/DIST_README.md
@echo "4. To load your own project, click **📂 Load Project Folder** and select your project directory" >> dist/DIST_README.md
@echo "" >> dist/DIST_README.md
@echo "### Linux / Mac" >> dist/DIST_README.md
@echo "" >> dist/DIST_README.md
@echo "1. Run \`./start-server.sh\` (or \`bash start-server.sh\`)" >> dist/DIST_README.md
@echo "2. Your browser will open automatically at http://localhost:8000" >> dist/DIST_README.md
@echo "3. The application will load the example project automatically" >> dist/DIST_README.md
@echo "4. To load your own project, click **📂 Load Project Folder** and select your project directory" >> dist/DIST_README.md
@echo "" >> dist/DIST_README.md
@echo "### Alternative: Open Directly" >> dist/DIST_README.md
@echo "" >> dist/DIST_README.md
@@ -233,7 +235,9 @@ dist:
@echo "3. Edit \`project.json\` to configure your timeline" >> dist/DIST_README.md
@echo "4. Replace \`sample.csv\` with your data" >> dist/DIST_README.md
@echo "5. Customize \`style.css\` and \`template-v2.svg\` as needed" >> dist/DIST_README.md
@echo "6. Load your project in the application using the file upload controls" >> dist/DIST_README.md
@echo "6. Click **📂 Load Project Folder** and select your project folder - all files load automatically!" >> dist/DIST_README.md
@echo "" >> dist/DIST_README.md
@echo "**Tip:** The folder picker loads all files (JSON, CSV, SVG, CSS) in one click. You can also load files individually using the separate upload buttons if needed." >> dist/DIST_README.md
@echo "" >> dist/DIST_README.md
@echo "See README.md and TEMPLATE_V2_GUIDE.md for detailed instructions." >> dist/DIST_README.md
@echo "" >> dist/DIST_README.md