Add file upload support: enable image uploads, implement file validation, and integrate media handling in project-support forms. 🛠 Update Blade templates and Livewire components for improved UX.

This commit is contained in:
HolgerHatGarKeineNode
2026-01-20 15:57:13 +01:00
parent 4a425da923
commit 5e5e211244
6 changed files with 307 additions and 43 deletions

View File

@@ -5,12 +5,15 @@ use App\Support\NostrAuth;
use Livewire\Attributes\Layout;
use Livewire\Attributes\Title;
use Livewire\Component;
use Livewire\WithFileUploads;
new
#[Layout('layouts.app')]
#[Title('Projektförderung bearbeiten')]
class extends Component
{
use WithFileUploads;
public ProjectProposal $project;
public array $form = [
@@ -22,6 +25,8 @@ class extends Component
'sats_paid' => 0,
];
public $file = null;
public bool $isAllowed = false;
public bool $isAdmin = false;
@@ -58,6 +63,21 @@ class extends Component
}
}
public function deleteMainImage(): void
{
if ($this->project->getFirstMedia('main')) {
$this->project->getFirstMedia('main')->delete();
}
}
public function removeFile(): void
{
if ($this->file) {
$this->file->delete();
$this->file = null;
}
}
public function update(): void
{
$this->validate([
@@ -65,6 +85,7 @@ class extends Component
'form.description' => 'required|string',
'form.support_in_sats' => 'required|integer|min:0',
'form.website' => 'required|url|max:255',
'file' => 'nullable|file|mimes:jpeg,png,jpg,gif,webp|max:10240',
]);
$this->project->update([
@@ -76,6 +97,10 @@ class extends Component
'sats_paid' => $this->isAdmin ? $this->form['sats_paid'] : $this->project->sats_paid,
]);
if ($this->file) {
$this->project->addMedia($this->file)->toMediaCollection('main');
}
$this->redirectRoute('association.projectSupport.item', $this->project);
}
};
@@ -88,8 +113,11 @@ class extends Component
class="flex flex-col md:flex-row items-center mb-6 space-y-4 md:space-y-0 md:space-x-4">
<div class="flex items-center justify-between w-full">
<h1 class="text-2xl md:text-3xl text-zinc-800 dark:text-zinc-100 font-bold">
Projektförderung bearbeiten
Projektförderungs-Antrag bearbeiten
</h1>
<flux:button :href="route('association.projectSupport')" variant="ghost" icon="arrow-left">
Zurück
</flux:button>
</div>
</div>
@@ -121,6 +149,46 @@ class extends Component
<flux:error name="form.support_in_sats" />
</flux:field>
</div>
<div>
<flux:field>
<flux:label>Bild</flux:label>
<flux:file-upload wire:model="file" label="Bild hochladen">
<flux:file-upload.dropzone
heading="Bild hier ablegen oder zum Durchsuchen klicken"
text="JPG, PNG, GIF, WebP bis zu 10MB"
/>
</flux:file-upload>
<flux:error name="file" />
@if($file)
<div class="mt-4 flex flex-col gap-2">
<flux:file-item
:heading="$file->getClientOriginalName()"
:image="$file->temporaryUrl()"
:size="$file->getSize()"
>
<x-slot name="actions">
<flux:file-item.remove wire:click="removeFile" />
</x-slot>
</flux:file-item>
</div>
@endif
</flux:field>
@if($project->getFirstMedia('main'))
<div class="mt-4">
<flux:file-item
:heading="$project->getFirstMedia('main')->file_name"
:image="$project->getFirstMediaUrl('main')"
:size="$project->getFirstMedia('main')->size"
>
<x-slot name="actions">
<flux:file-item.remove wire:click="deleteMainImage" />
</x-slot>
</flux:file-item>
</div>
@endif
</div>
<div>
<flux:editor wire:model="form.description" label="Beschreibung" description="Projektbeschreibung..." />
<flux:error name="form.description" />