136 lines
4.8 KiB
Svelte
136 lines
4.8 KiB
Svelte
<!-- [DEF:FileUpload:Component] -->
|
|
<!--
|
|
@TIER: STANDARD
|
|
@SEMANTICS: storage, upload, files
|
|
@PURPOSE: Provides a form for uploading files to a specific category.
|
|
@LAYER: UI
|
|
@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';
|
|
import { t } from '../../lib/i18n';
|
|
// [/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 = 'backups',
|
|
path = '',
|
|
} = $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 = '';
|
|
dispatch('uploaded');
|
|
} catch (error) {
|
|
addToast($t.storage.messages.upload_failed.replace('{error}', 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">{$t.storage.upload_title}</h2>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">{$t.storage.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="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'}"
|
|
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] -->
|
|
|
|
|
|
<!-- [/DEF:FileUpload:Component] -->
|