Im using laravel with the livewire stack(livewire 3) and i have this save function
public function save(): void
{
$this->editing = false;
$this->validate();
$admin = auth()->user();
$this->gallery->user_id = $admin->id;
$this->gallery->applied_to = $this->applied_to;
$this->gallery->description = $this->description;
$newImageUploaded = false;
if ($this->path instanceof UploadedFile) {
// Delete the old image file if it exists
Storage::delete("serviceImages/" . $this->gallery->path);
// Save the new image file
$filename = $this->path->store("/", "serviceImages");
$this->gallery->path = $filename;
$newImageUploaded = true;
}
if (!$newImageUploaded && $this->gallery->getOriginal("path")) {
// If no new image was uploaded and the original model has an image, retain the original path
$this->gallery->path = $this->gallery->getOriginal("path");
}
$this->gallery->save();
$this->showGalleryModal = false;
$this->dispatch('notify', 'Image saved');
}
when i upload the first ever image on my server the image gets uploaded but when i try to update the uploaded image with a different image or add a new image i get error uploading image. im also using filepond to upload the images. this is my filepond component
<div
wire:ignore
x-data
x-init="
FilePond.registerPlugin(FilePondPluginImagePreview);
FilePond.setOptions({
allowMultiple: {{ isset($attributes['multiple']) ? 'true' : 'false' }},
server: {
process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
@this.upload('{{ $attributes['wire:model'] }}', file, load, error, progress)
},
revert: (filename, load) => {
@this.removeUpload('{{ $attributes['wire:model'] }}', filename, load)
},
},
});
FilePond.create($refs.input);"
>
<input type="file" x-ref="input"/>
</div>
and this is where the filepond component is called along with the fields
<div>
<div class="flex justify-end mr-3">
<x-button class="mb-5" wire:click="addImage">
Add image
</x-button>
</div>
<div class="bg-white overflow-y-auto shadow-md sm:rounded-lg ml-2 mr-2 rounded-md">
<x-table.table>
<x-slot name="head">
<x-table.table-heading class="px-6 py-6">
{{ __('Applied to') }}
</x-table.table-heading>
<x-table.table-heading class="px-6 py-6">
{{ __('Description') }}
</x-table.table-heading>
<x-table.table-heading class="px-6 py-6">
{{ __('Image') }}
</x-table.table-heading>
<x-table.table-heading class="flex justify-center px-6 py-6">
{{ __('Actions') }}
</x-table.table-heading>
</x-slot>
<x-slot name="body">
<x-dialog-modal wire:model="showGalleryImageModal">
<x-slot name="title">Service image</x-slot>
<x-slot name="content">
<div>
@if ($gallery->path)
<img id="path" src="{{ Storage::disk('serviceImages')->url($gallery->path) }}" alt="Gallery Image" class="mb-4 mt-4 rounded-lg shadow-md">
@endif
</div>
</x-slot>
<x-slot name="footer">
<x-secondary-button wire:click="$set('showGalleryImageModal', false)" class="mr-2"> Cancel
</x-secondary-button>
</x-slot>
</x-dialog-modal>
@forelse ($galleries as $gallery)
<tr class="bg-white border-b dark:bg-gray-700"
wire:loading.class.delay="opacity-50 dark:opacity-95" wire:key="{{ $gallery->id }}">
<td class="px-6 py-4 text-gray-900 dark:text-gray-200">
{{ ucwords($gallery->applied_to) }}
</td>
<td class="py-4 text-gray-900 dark:text-gray-200">
{{ Str::words(ucwords($gallery->description),3) }}
</td>
<td class="px-6 py-4 text-gray-900 dark:text-gray-200">
<a href="#" wire:click="expandImage({{ $gallery->id }})">
<img src="{{ Storage::disk('serviceImages')->url($gallery->path) }}" alt="Service images" class="h-8 object-cover rounded-full w-8">
</a>
</td>
<td class="px-6 py-4 text-gray-900 dark:text-gray-200">
<div class="flex justify-center">
<x-secondary-button wire:click="edit({{ $gallery->id }})" class="mr-3">
{{ __('Edit') }}
</x-secondary-button>
<x-danger-button wire:click="delete({{ $gallery->id }})" wire:confirm="Are you sure you want to delete?">
{{ __('Delete') }}
</x-danger-button>
</div>
</td>
</tr>
@empty
<tr class="bg-white border-b dark:bg-gray-700">
<td class="px-6 py-4 text-gray-900" colspan="5">
<div class="flex justify-center text-gray-400">
{{ __('Enter some images for your services') }}
</div>
</td>
</tr>
@endforelse
</x-slot>
</x-table.table>
</div>
@include('components.gallery.gallery-form')
</div>
When i upload the images localy everything works fine but on production server it blows up. im using S3 and everything is configured properly. Any help is appreciated. Thank you in advance
Im also getting this error when i open chrome dev dools
Uncaught ReferenceError: message is not defined
at added (livewire.js?id=2f6e5d4d:7039:11)
at swapElements (livewire.js?id=2f6e5d4d:6255:7)
at patch (livewire.js?id=2f6e5d4d:6225:16)
at Object.morph (livewire.js?id=2f6e5d4d:6438:5)
at morph2 (livewire.js?id=2f6e5d4d:6999:20)
at livewire.js?id=2f6e5d4d:7070:7
livewire.js?id=2f6e5d4d:4189 Uncaught Snapshot missing on Livewire component with id: m3nUjdglWrHTDRjNQTzM
Vh0W0esX7oVUKrrtnBp52MjQ3rYmmaFaVU7M6OdZ.jpg:1
Failed to load resource: the server responded with a status of 403 (Forbidden)
everythinghairsalon.nyc/:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
Vh0W0esX7oVUKrrtnBp52MjQ3rYmmaFaVU7M6OdZ.jpg:1
Im stuck at this point
The error was resolved. It wasn't a code issue, it was an amazon s3 permissions issue