142 lines
6.1 KiB
PHP
142 lines
6.1 KiB
PHP
<?php
|
|
|
|
use Livewire\Volt\Component;
|
|
|
|
new class extends Component
|
|
{
|
|
//
|
|
}; ?>
|
|
|
|
<div class="min-h-screen bg-gray-50 dark:bg-zinc-900 py-12 px-4 sm:px-6 lg:px-8">
|
|
<div class="max-w-2xl mx-auto">
|
|
<div class="bg-white dark:bg-zinc-800 shadow rounded-lg p-8">
|
|
<flux:heading size="xl" class="mb-2">{{ __('File Upload') }}</flux:heading>
|
|
<flux:subheading class="mb-8">{{ __('Upload files to the processing endpoint') }}</flux:subheading>
|
|
|
|
<div x-data="{
|
|
file: null,
|
|
fileName: '',
|
|
fileSize: 0,
|
|
uploading: false,
|
|
uploadStatus: null,
|
|
uploadMessage: '',
|
|
|
|
selectFile(event) {
|
|
this.file = event.target.files[0];
|
|
if (this.file) {
|
|
this.fileName = this.file.name;
|
|
this.fileSize = (this.file.size / 1024).toFixed(2);
|
|
}
|
|
},
|
|
|
|
async upload() {
|
|
if (!this.file) return;
|
|
|
|
this.uploading = true;
|
|
this.uploadStatus = null;
|
|
this.uploadMessage = '';
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', this.file);
|
|
|
|
try {
|
|
const response = await fetch('https://upload.trai.mcs.local/api/upload', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
if (response.ok) {
|
|
this.uploadStatus = 'success';
|
|
this.uploadMessage = '{{ __('File uploaded successfully!') }}';
|
|
this.file = null;
|
|
this.fileName = '';
|
|
this.fileSize = 0;
|
|
this.$refs.fileInput.value = '';
|
|
} else {
|
|
const errorText = await response.text();
|
|
this.uploadStatus = 'error';
|
|
this.uploadMessage = `{{ __('Upload failed') }}: ${errorText}`;
|
|
}
|
|
} catch (error) {
|
|
this.uploadStatus = 'error';
|
|
this.uploadMessage = `{{ __('Upload error') }}: ${error.message}`;
|
|
} finally {
|
|
this.uploading = false;
|
|
}
|
|
},
|
|
|
|
clearFile() {
|
|
this.file = null;
|
|
this.fileName = '';
|
|
this.fileSize = 0;
|
|
this.$refs.fileInput.value = '';
|
|
}
|
|
}">
|
|
<form @submit.prevent="upload" class="space-y-6">
|
|
<div>
|
|
<label for="file-upload" class="block text-sm font-medium text-zinc-950 dark:text-white mb-2">
|
|
{{ __('Select File') }}
|
|
</label>
|
|
<input
|
|
x-ref="fileInput"
|
|
id="file-upload"
|
|
type="file"
|
|
@change="selectFile"
|
|
required
|
|
class="block w-full text-sm text-zinc-900 dark:text-white border border-zinc-300 dark:border-zinc-600 rounded-lg cursor-pointer bg-zinc-50 dark:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 dark:file:bg-blue-900 dark:file:text-blue-300 dark:hover:file:bg-blue-800"
|
|
/>
|
|
|
|
<p x-show="fileName" x-text="`{{ __('Selected file') }}: ${fileName} (${fileSize} KB)`" class="mt-2 text-sm text-zinc-600 dark:text-zinc-400"></p>
|
|
</div>
|
|
|
|
<div x-show="uploadStatus">
|
|
<flux:callout x-bind:variant="uploadStatus === 'success' ? 'success' : 'danger'">
|
|
<span x-text="uploadMessage"></span>
|
|
</flux:callout>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<flux:button
|
|
variant="primary"
|
|
type="submit"
|
|
x-bind:disabled="uploading || !file"
|
|
>
|
|
<span x-show="!uploading">{{ __('Upload File') }}</span>
|
|
<span x-show="uploading">{{ __('Uploading...') }}</span>
|
|
</flux:button>
|
|
|
|
<flux:button
|
|
x-show="file"
|
|
variant="ghost"
|
|
type="button"
|
|
@click="clearFile"
|
|
x-bind:disabled="uploading"
|
|
>
|
|
{{ __('Clear') }}
|
|
</flux:button>
|
|
</div>
|
|
|
|
<div x-show="uploading" class="mt-4">
|
|
<div class="w-full bg-gray-200 dark:bg-zinc-700 rounded-full h-2.5">
|
|
<div class="bg-blue-600 h-2.5 rounded-full animate-pulse" style="width: 100%"></div>
|
|
</div>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-2">
|
|
{{ __('Please wait while your file is being uploaded...') }}
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<flux:separator class="my-8" />
|
|
|
|
<div class="text-sm text-gray-600 dark:text-gray-400 space-y-2">
|
|
<p class="font-semibold">{{ __('Information:') }}</p>
|
|
<ul class="list-disc list-inside space-y-1">
|
|
<li>{{ __('Maximum file size: 50 MB') }}</li>
|
|
<li>{{ __('Upload endpoint: https://upload.trai.mcs.local/api/upload') }}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|