init: UI выбора файлов — input[file], таблица, Flask skeleton

site/static/app.js

@@ -0,0 +1,93 @@
+/**
+ * app.js — UI выбора файлов из локали.
+ *
+ * Выбираем файлы через <input type="file" multiple>,
+ * показываем в таблице: имя, размер, кнопка удаления.
+ *
+ * Никакой загрузки на сервер — чисто клиент.
+ */
+
+var files = [];   // [{ name, size, lastModified }]
+
+var fileInput = document.getElementById('fileInput');
+var fileTable = document.getElementById('fileTable');
+var fileSummary = document.getElementById('fileSummary');
+var clearBtn = document.getElementById('clearBtn');
+
+fileInput.addEventListener('change', function () {
+  addFiles(fileInput.files);
+  fileInput.value = '';
+});
+
+/** formatSize(bytes) → "1.2 KB", "3.4 MB", "900 B" */
+function formatSize(bytes) {
+  if (!bytes || bytes === 0) return '—';
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
+  if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + ' MB';
+  return (bytes / 1073741824).toFixed(2) + ' GB';
+}
+
+/** addFiles(fileList) — добавить файлы в массив и перерисовать */
+function addFiles(fileList) {
+  for (var i = 0; i < fileList.length; i++) {
+    var f = fileList[i];
+    files.push({
+      name: f.name,
+      size: f.size,
+      lastModified: f.lastModified
+    });
+  }
+  renderTable();
+}
+
+/** removeFile(i) — удалить файл по индексу */
+function removeFile(i) {
+  files.splice(i, 1);
+  renderTable();
+}
+
+/** renderTable() — перерисовать таблицу и сводку */
+function renderTable() {
+  if (files.length === 0) {
+    fileTable.innerHTML = '<tr class="empty-row"><td colspan="3">Нет файлов — выберите файлы</td></tr>';
+    fileSummary.textContent = 'Нет файлов';
+    clearBtn.disabled = true;
+    return;
+  }
+
+  var totalSize = 0;
+  var rows = [];
+  for (var i = 0; i < files.length; i++) {
+    var f = files[i];
+    totalSize += f.size;
+    rows.push(
+      '<tr>' +
+      '<td class="name-cell" title="' + escHtml(f.name) + '">' + escHtml(f.name) + '</td>' +
+      '<td class="num-cell">' + formatSize(f.size) + '</td>' +
+      '<td><button class="remove-btn" onclick="removeFile(' + i + ')" title="Удалить">✕</button></td>' +
+      '</tr>'
+    );
+  }
+  fileTable.innerHTML = rows.join('');
+
+  fileSummary.textContent = files.length + ' файл., ' + formatSize(totalSize);
+  clearBtn.disabled = false;
+}
+
+/** clearAll() — очистить всё */
+function clearAll() {
+  files = [];
+  renderTable();
+}
+
+/** escHtml(s) — экранирование HTML */
+function escHtml(s) {
+  if (s == null) return '';
+  var d = document.createElement('div');
+  d.textContent = s;
+  return d.innerHTML;
+}
+
+// Первичный рендер
+renderTable();