Передаем на тест

frontend/src/components/storage/FileUpload.svelte

@@ -0,0 +1,126 @@
+<!-- [DEF:FileUpload:Component] -->
+<!--
+@SEMANTICS: storage, upload, files
+@PURPOSE:   Provides a form for uploading files to a specific category.
+@LAYER:     Component
+@RELATION:  DEPENDS_ON -> storageService
+
+@PROPS:     None
+@EVENTS:    uploaded - Dispatched when a file is successfully uploaded.
+-->
+
+<script lang="ts">
+  // [SECTION: IMPORTS]
+  import { createEventDispatcher } from 'svelte';
+  import { uploadFile } from '../../services/storageService';
+  import { addToast } from '../../lib/toasts';
+  // [/SECTION: IMPORTS]
+
+  // [DEF:handleUpload:Function]
+  /**
+   * @purpose Handles the file upload process.
+   * @pre     A file must be selected in the file input.
+   * @post    The file is uploaded to the server and a success toast is shown.
+   */
+  const dispatch = createEventDispatcher();
+  let fileInput;
+  let category = 'backup';
+  let isUploading = false;
+  let dragOver = false;
+
+  async function handleUpload() {
+    const file = fileInput.files[0];
+    if (!file) return;
+
+    isUploading = true;
+    try {
+      await uploadFile(file, category);
+      addToast(`File ${file.name} uploaded successfully.`, 'success');
+      fileInput.value = '';
+      dispatch('uploaded');
+    } catch (error) {
+      addToast(`Upload failed: ${error.message}`, 'error');
+    } finally {
+      isUploading = false;
+    }
+  }
+  // [/DEF:handleUpload:Function]
+
+  // [DEF:handleDrop:Function]
+  /**
+   * @purpose Handles the file drop event for drag-and-drop.
+   * @param   {DragEvent} event - The drop event.
+   */
+  function handleDrop(event) {
+    event.preventDefault();
+    dragOver = false;
+    const files = event.dataTransfer.files;
+    if (files.length > 0) {
+      fileInput.files = files;
+      handleUpload();
+    }
+  }
+  // [/DEF:handleDrop:Function]
+</script>
+
+<!-- [SECTION: TEMPLATE] -->
+<div class="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
+  <h2 class="text-lg font-semibold mb-4">Upload File</h2>
+  
+  <div class="space-y-4">
+    <div>
+      <label class="block text-sm font-medium text-gray-700 mb-1">Target Category</label>
+      <select 
+        bind:value={category}
+        class="block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+      >
+        <option value="backup">Backup</option>
+        <option value="repository">Repository</option>
+      </select>
+    </div>
+
+    <div 
+      class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-dashed rounded-md transition-colors
+        {dragOver ? 'border-indigo-500 bg-indigo-50' : 'border-gray-300'}"
+      on:dragover|preventDefault={() => dragOver = true}
+      on:dragleave|preventDefault={() => dragOver = false}
+      on:drop|preventDefault={handleDrop}
+    >
+      <div class="space-y-1 text-center">
+        <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
+          <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+        <div class="flex text-sm text-gray-600">
+          <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
+            <span>Upload a file</span>
+            <input 
+              id="file-upload" 
+              name="file-upload" 
+              type="file" 
+              class="sr-only" 
+              bind:this={fileInput}
+              on:change={handleUpload}
+              disabled={isUploading}
+            >
+          </label>
+          <p class="pl-1">or drag and drop</p>
+        </div>
+        <p class="text-xs text-gray-500">ZIP, YAML, JSON up to 50MB</p>
+      </div>
+    </div>
+
+    {#if isUploading}
+      <div class="flex items-center justify-center space-x-2 text-indigo-600">
+        <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-indigo-600"></div>
+        <span class="text-sm font-medium">Uploading...</span>
+      </div>
+    {/if}
+  </div>
+</div>
+<!-- [/SECTION: TEMPLATE] -->
+
+<style>
+  /* ... */
+</style>
+
+<!-- [/DEF:FileUpload:Component] -->