ss-tools/frontend/src/components/storage/FileUpload.svelte

<!-- #region FileUpload [C:3] [TYPE Component] [SEMANTICS storage, upload, drag-drop, file, form] -->
<!-- @BRIEF Component component: components/storage/FileUpload.svelte -->
<!-- @LAYER UI -->
<!--
@UX_STATE: Loading -> Default

@SEMANTICS: storage, upload, files
@PURPOSE:   Provides a form for uploading files to a specific category.
@LAYER     UI
@RELATION  DEPENDS_ON -> [storageService]

@PROPS:     None
@EVENTS:    onuploaded callback prop - Invoked when a file is successfully uploaded.
-->

<script lang="ts">
  // [SECTION: IMPORTS]
  import { uploadFile } from '../../services/storageService';
  import { addToast } from '$lib/toasts.svelte.js';
  import { t } from '$lib/i18n/index.svelte.js';
  // [/SECTION: IMPORTS]

  // #region handleUpload:Function [TYPE 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.
   */
  let fileInput;
  let {
    category = 'backups',
    path = '',
    onuploaded = () => {},
  } = $props();

  let isUploading = $state(false);
  let dragOver = $state(false);

  async function handleUpload() {
    const file = fileInput.files[0];
    if (!file) return;

    isUploading = true;
    try {
      // path is relative to root, but upload endpoint expects path within category
      // FileList.path is like "backup/folder", we need just "folder"
      const subpath = path.startsWith(category)
        ? path.substring(category.length).replace(/^\/+/, '')
        : path;

      await uploadFile(file, category, subpath);
      addToast($t.storage.messages.upload_success.replace('{name}', file.name), 'success');
      fileInput.value = '';
      onuploaded();
    } catch (error) {
      addToast($t.storage.messages.upload_failed.replace('{error}', error.message), 'error');
    } finally {
      isUploading = false;
    }
  }
  // #endregion handleUpload:Function

  // #region handleDrop:Function [TYPE 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();
    }
  }
  // #endregion 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">{$t.storage.upload_title}</h2>
  
  <div class="space-y-4">
    <div>
      <label for="storage-upload-category" class="block text-sm font-medium text-gray-700 mb-1">{$t.storage.target_category}</label>
      <select
        id="storage-upload-category"
        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="backups">{$t.storage.backups}</option>
        <option value="repositorys">{$t.storage.repositories}</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'}"
      role="region"
      aria-label={$t.storage.upload_title}
      ondragover={(event) => { event.preventDefault(); dragOver = true; }}
      ondragleave={(event) => { event.preventDefault(); dragOver = false; }}
      ondrop={(event) => { event.preventDefault(); handleDrop(event); }}
    >
      <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>{$t.storage.upload_button}</span>
            <input
              id="file-upload" 
              name="file-upload" 
              type="file" 
              class="sr-only" 
              bind:this={fileInput}
              onchange={handleUpload}
              disabled={isUploading}
            >
          </label>
          <p class="pl-1">{$t.storage.drag_drop}</p>
        </div>
        <p class="text-xs text-gray-500">{$t.storage.supported_formats}</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">{$t.storage.uploading}</span>
      </div>
    {/if}
  </div>
</div>
<!-- [/SECTION: TEMPLATE] -->


<!-- #endregion FileUpload -->