File uploader

2025-11-14 16:27:04 +03:00
parent 3a3d3abf98
commit 1c6ab276c8
5 changed files with 273 additions and 0 deletions
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Аналог DropMeFiles</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+  <h1>Аналог DropMeFiles</h1>
+  <div class="upload-container">
+    <form id="uploadForm">
+      <label class="dropzone" id="dropzone">
+        <input id="fileInput" type="file" multiple>
+        <p class="strong">Перетащите файлы сюда или нажмите, чтобы выбрать</p>
+        <p>Файлы будут отправлены на сервер после нажатия кнопки</p>
+      </label>
+      <button type="submit" id="uploadButton" disabled>Загрузить</button>
+    </form>
+    <div class="status" id="status"></div>
+  </div>
+
+  <script src="./script.js"></script>
+</body>
+</html>
@@ -0,0 +1,77 @@
+const fileInput = document.getElementById('fileInput');
+const dropzone = document.getElementById('dropzone');
+const uploadButton = document.getElementById('uploadButton');
+const uploadForm = document.getElementById('uploadForm');
+const statusDiv = document.getElementById('status');
+
+const updateButtonState = () => {
+  uploadButton.disabled = !fileInput.files || fileInput.files.length === 0;
+};
+
+const setStatus = (message, type = '') => {
+  statusDiv.textContent = message;
+  statusDiv.className = type ? `status ${type}` : 'status';
+};
+
+dropzone.addEventListener('dragover', (event) => {
+  event.preventDefault();
+  dropzone.classList.add('dragover');
+});
+
+dropzone.addEventListener('dragleave', () => {
+  dropzone.classList.remove('dragover');
+});
+
+dropzone.addEventListener('drop', (event) => {
+  event.preventDefault();
+  dropzone.classList.remove('dragover');
+
+  if (event.dataTransfer?.files?.length) {
+    fileInput.files = event.dataTransfer.files;
+    updateButtonState();
+  }
+});
+
+fileInput.addEventListener('change', () => {
+  updateButtonState();
+});
+
+uploadForm.addEventListener('submit', async (event) => {
+  event.preventDefault();
+
+  if (!fileInput.files || fileInput.files.length === 0) {
+    setStatus('Выберите файлов для загрузки.', 'error');
+    return;
+  }
+
+  const formData = new FormData();
+  Array.from(fileInput.files).forEach((file) => {
+    formData.append('files', file);
+  });
+
+  uploadButton.disabled = true;
+  dropzone.classList.remove('dragover');
+  setStatus('Загрузка...', '');
+
+  try {
+    const response = await fetch('http://192.168.0.132:5000/upload_file', {
+      method: 'POST',
+      body: formData
+    });
+
+    if (!response.ok) {
+      throw new Error(`Ошибка сервера: ${response.status}`);
+    }
+
+    const data = await response.text();
+    setStatus(`Путь к файлу: ${data}`, 'success');
+    fileInput.value = '';
+  } catch (error) {
+    setStatus(`Не удалось загрузить файлы: ${error.message}`, 'error');
+  } finally {
+    uploadButton.disabled = false;
+  }
+});
+
+updateButtonState();
+
@@ -0,0 +1,110 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-family: Arial, sans-serif;
+  background: radial-gradient(circle at top, #f7f7fb, #eff1f8);
+  color: #111827;
+  padding: 24px;
+}
+
+h1 {
+  font-size: clamp(32px, 4vw, 48px);
+  margin-bottom: 32px;
+  text-align: center;
+}
+
+.upload-container {
+  width: min(640px, 100%);
+  background: #ffffffdd;
+  border-radius: 20px;
+  box-shadow: 0 20px 45px -20px rgba(15, 23, 42, 0.65);
+  padding: 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  backdrop-filter: blur(8px);
+}
+
+.dropzone {
+  border: 2px dashed #6366f1;
+  border-radius: 16px;
+  padding: 48px 24px;
+  text-align: center;
+  transition: all 0.2s ease;
+  background: rgba(99, 102, 241, 0.04);
+  cursor: pointer;
+  position: relative;
+}
+
+.dropzone.dragover {
+  background: rgba(99, 102, 241, 0.12);
+  transform: translateY(-2px);
+  box-shadow: 0 14px 28px -24px rgba(99, 102, 241, 0.65);
+}
+
+.dropzone input[type="file"] {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.dropzone p {
+  margin: 8px 0;
+  color: #4b5563;
+  font-size: 16px;
+}
+
+.dropzone p.strong {
+  font-weight: 600;
+  color: #1f2937;
+  font-size: 18px;
+}
+
+button {
+  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  padding: 14px 20px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+button:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 16px 32px -24px rgba(99, 102, 241, 0.8);
+}
+
+button:disabled {
+  background: #cbd5f5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.status {
+  min-height: 24px;
+  font-size: 15px;
+  color: #374151;
+  line-height: 1.5;
+  word-break: break-all;
+}
+
+.status.error {
+  color: #dc2626;
+}
+
+.status.success {
+  color: #166534;
+}
+