fix: added upload formular, reorganized some files and put them into a new folder misc
This commit is contained in:
@@ -0,0 +1,141 @@
|
||||
<?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>
|
||||
Reference in New Issue
Block a user