Implement reusable upload platform

2026-09-05 08:51:32 +03:00
parent 82d9ca9136
commit c0b87880ae
35 changed files with 734 additions and 9 deletions
@@ -0,0 +1,44 @@
+import { addFiles } from './on_files_change.js';
+import { onFilesChange } from './on_files_change.js';
+import { onFolderChange } from './on_folder_change.js';
+import { render } from './render.js';
+import { setStatus } from './set_status.js';
+
+export function initUploadTable(cfg) {
+  const elements = {
+    fileInputEl: cfg.fileInputEl,
+    folderInputEl: cfg.folderInputEl,
+    tableBodyEl: cfg.tableBodyEl,
+    countEl: cfg.countEl,
+    uploadBtnEl: cfg.uploadBtnEl,
+  };
+  const state = { files: [], fileMeta: new Map(), overNames: new Set(), busy: false };
+  elements.fileInputEl.addEventListener('change', onFilesChange(state, cfg, elements));
+  elements.folderInputEl.addEventListener('change', onFolderChange(state, cfg, elements));
+
+  const api = {
+    pickFiles: () => elements.fileInputEl.click(),
+    pickFolder: () => elements.folderInputEl.click(),
+    addFiles: (files) => addFiles(state, cfg, files, elements),
+    getFiles: () => state.files
+      .filter((file) => !state.overNames.has(file.name))
+      .map((file) => ({ path: file.name, name: file.name, size: file.size, file })),
+    getOverNames: () => new Set(state.overNames),
+    setStatus: (path, html) => setStatus(path, html, state, elements),
+    render: () => render(state, elements),
+    clear: () => {
+      state.files = [];
+      state.fileMeta.clear();
+      state.overNames.clear();
+      render(state, elements);
+    },
+    setBusy: (busy) => {
+      state.busy = busy;
+      elements.fileInputEl.disabled = busy;
+      elements.folderInputEl.disabled = busy;
+      elements.uploadBtnEl.disabled = busy || api.getFiles().length === 0;
+    },
+  };
+  api.render();
+  return api;
+}