forcloud/upload-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: make file picker embeddable

Browse Source
This commit is contained in:
“Naeel”
2026-09-05 14:42:50 +03:00
parent aec8ad4fbe
commit 3d227f1daa
18 changed files with 3005 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/templates/index.html
+6 -35
View File
@@ -17,44 +17,15 @@
</header>
<!-- Скрытые input дают браузеру FileList; кнопки ниже программно вызывают click(). -->
<section class="toolbar" aria-label="Выбор файлов">
<input id="file-input" type="file" accept=".pdf,.doc,.docx,.txt,.md,.zip" multiple hidden>
<input id="folder-input" type="file" accept=".pdf,.doc,.docx,.txt,.md,.zip" webkitdirectory directory multiple hidden>
<button id="files-btn" type="button">Выбрать файлы</button>
<button id="folder-btn" type="button" class="secondary">Выбрать папку</button>
<button id="clear-btn" type="button" class="quiet">Очистить</button>
<div id="file-picker"></div>
</section>
<!-- Сюда могут выводиться сообщения интегратора; таблица использует отдельный render(). -->
<p id="status" class="status" role="status"></p>
<!-- tableBodyEl является обязательным DOM-контрактом initUploadTable. -->
<div class="table-wrap">
<table>
<thead><tr><th>Путь</th><th>Размер</th><th>Статус</th><th></th></tr></thead>
<tbody id="table-body"></tbody>
</table>
</div>
<!-- countEl обновляется render() и включает leaf-файлы даже в свернутых группах. -->
<p id="count" class="count"></p>
</main>
<!-- fflate должен быть загружен до ES-модулей, потому что ZIP-парсер использует global fflate. -->
<script src="{{ url_for('static', filename='vendor/fflate.min.js') }}"></script>
<script type="module">
// Конфигурация приходит из Flask; DOM-ссылки передаются в переиспользуемый picker.
import { initUploadTable } from "/upload-frontend/table/init_upload_table.js";
const cfg = {{ config|tojson }};
const table = initUploadTable({
...cfg,
fileInputEl: document.querySelector('#file-input'),
folderInputEl: document.querySelector('#folder-input'),
tableBodyEl: document.querySelector('#table-body'),
countEl: document.querySelector('#count'),
<script src="{{ url_for('file_picker_dist', filename='file-picker.iife.js', v=version) }}"></script>
<script>
FilePicker.initFilePicker({
mount: '#file-picker',
allowedExt: {{ config.allowedExt|tojson }},
});
// status зарезервирован для интегратора; picker сейчас обновляет только таблицу и count.
const status = document.querySelector('#status');
// Кнопки не содержат собственной логики выбора: весь state остаётся внутри table API.
document.querySelector('#files-btn').onclick = () => table.pickFiles();
document.querySelector('#folder-btn').onclick = () => table.pickFolder();
document.querySelector('#clear-btn').onclick = () => table.clear();
</script>
</body>
</html>