🎨 feat(image): validate and upload project proposal images in the form. Update image preview logic.

This commit is contained in:
fsociety
2024-10-24 19:46:42 +02:00
parent 22676d3f48
commit 6771aee148
3 changed files with 23 additions and 5 deletions

View File

@@ -50,6 +50,14 @@ on([
$save = function () { $save = function () {
$this->form->validate(); $this->form->validate();
if ($this->image) {
$this->validate([
'image' => 'image|max:1024',
]);
$this->projectProposal
->addMedia($this->image->getRealPath())
->toMediaCollection('main');
}
$this->projectProposal->update([ $this->projectProposal->update([
...$this->form->except('id', 'slug'), ...$this->form->except('id', 'slug'),
@@ -71,7 +79,7 @@ $save = function () {
<x-input.group :for=" md5('image')" :label="__('Bild')"> <x-input.group :for=" md5('image')" :label="__('Bild')">
<div class="py-4"> <div class="py-4">
@if ($image && str($image->getMimeType())->contains(['image/jpeg','image/jpg', 'image/png', 'image/gif', 'image/svg+xml', 'image/webp'])) @if ($image && method_exists($image, 'temporaryUrl') && str($image->getMimeType())->contains(['image/jpeg','image/jpg', 'image/png', 'image/gif', 'image/svg+xml', 'image/webp']))
<div class="text-gray-200">{{ __('Preview') }}:</div> <div class="text-gray-200">{{ __('Preview') }}:</div>
<img class="h-48 object-contain" src="{{ $image->temporaryUrl() }}"> <img class="h-48 object-contain" src="{{ $image->temporaryUrl() }}">
@endif @endif

View File

@@ -45,10 +45,20 @@ on([
$save = function () { $save = function () {
$this->form->validate(); $this->form->validate();
\App\Models\ProjectProposal::query()->create([ $this->validate('image', 'image|max:1024');
$projectProposal = \App\Models\ProjectProposal::query()->create([
...$this->form->all(), ...$this->form->all(),
'einundzwanzig_pleb_id' => $this->currentPleb->id, 'einundzwanzig_pleb_id' => $this->currentPleb->id,
]); ]);
if ($this->image) {
$this->validate([
'image' => 'image|max:1024',
]);
$projectProposal
->addMedia($this->image->getRealPath())
->toMediaCollection('main');
}
return redirect()->route('association.projectSupport'); return redirect()->route('association.projectSupport');
}; };
@@ -65,7 +75,7 @@ $save = function () {
<x-input.group :for=" md5('image')" :label="__('Bild')"> <x-input.group :for=" md5('image')" :label="__('Bild')">
<div class="py-4"> <div class="py-4">
@if ($image && str($image->getMimeType())->contains(['image/jpeg','image/jpg', 'image/png', 'image/gif', 'image/svg+xml', 'image/webp'])) @if ($image && method_exists($image, 'temporaryUrl') && str($image->getMimeType())->contains(['image/jpeg','image/jpg', 'image/png', 'image/gif', 'image/svg+xml', 'image/webp']))
<div class="text-gray-200">{{ __('Preview') }}:</div> <div class="text-gray-200">{{ __('Preview') }}:</div>
<img class="h-48 object-contain" src="{{ $image->temporaryUrl() }}"> <img class="h-48 object-contain" src="{{ $image->temporaryUrl() }}">
@endif @endif

View File

@@ -135,9 +135,9 @@ $delete = function ($id) {
class="flex bg-white dark:bg-gray-800 shadow-sm rounded-xl overflow-hidden"> class="flex bg-white dark:bg-gray-800 shadow-sm rounded-xl overflow-hidden">
<!-- Image --> <!-- Image -->
<a class="relative block w-24 sm:w-56 xl:sidebar-expanded:w-40 2xl:sidebar-expanded:w-56 shrink-0" <a class="relative block w-24 sm:w-56 xl:sidebar-expanded:w-40 2xl:sidebar-expanded:w-56 shrink-0"
href="{{ route('association.projectSupport.item', ['projectProposal' => $project]) }}"> href="{{ route('association.projectSupport.item', ['projectProposal' => $project]) }}">
<img class="absolute object-cover object-center w-full h-full" <img class="absolute object-cover object-center w-full h-full"
src="{{ asset('einundzwanzig-alpha.jpg') }}" alt="Meetup 01"> src="{{ $project->getFirstMediaUrl('main') }}" alt="Meetup 01">
<button class="absolute top-0 right-0 mt-4 mr-4"> <button class="absolute top-0 right-0 mt-4 mr-4">
<img class="rounded-full h-8 w-8" src="{{ $project->einundzwanzigPleb->profile->picture }}" <img class="rounded-full h-8 w-8" src="{{ $project->einundzwanzigPleb->profile->picture }}"
alt=""> alt="">