Using livewire to control a form with some fields and image uploading capability
<form enctype="multipart/form-data" class="flex justify-center" wire:submit.prevent="upload">
<input accept="image/*" wire:model="image.image" type="file"
class="w-full h-full opacity-0 cursor-pointer" name="upload">
</form
use AppModelsAnimal;
use AppModelsImage;
use LivewireComponent;
use LivewireWithFileUploads;
class AddAnimal extends Component
{
use WithFileUploads;
public Animal $animal;
public Image $image;
protected array $rules = [
'animal.name' => 'required|min:2',
'animal.eye_color_id' => 'nullable',
'animal.bio' => 'nullable',
'animal.breeds_id' => 'nullable',
'animal.genders_id' => 'nullable',
'animal.breeders_id' => 'nullable',
'animal.chip_number' => 'nullable',
'animal.passport_url' => 'nullable',
'image.image' => 'image|max:1024',
];
public function mount()
{
$this->animal = new Animal();
$this->image = new Image();
}
public function render()
{
return view('livewire.add-animal')
}
public function upload()
{
$this->validate();
$this->animal->save();
$this->image->store('photos');
}
Upload function gets called and the animal is being saved correctly to the database, but the image throws an error saying "The image must be an image" , but it is an image ?
Source: Laravel