Livewire: What is the proper way to save multiple images in the storage link and the name of the image in the database? - laravel-8

Question

I tried to upload multiple images and want to save it to the storage and and name of the image into database but nothing happened next.
I dump the data from the view and I got this
array:3 [▼
0 => Livewire\TemporaryUploadedFile {#1437 ▼
+"disk": "local"
#storage: Illuminate\Filesystem\FilesystemAdapter {#1384 ▶}
#path: "livewire-tmp/pALAWPNYcMg4pm1w8EINqvURTuYH8x-metaRmFjZWJvb2stMDAxOS5qcGc=-.jpg"
-test: false
-originalName: "pALAWPNYcMg4pm1w8EINqvURTuYH8x-metaRmFjZWJvb2stMDAxOS5qcGc=-.jpg"
-mimeType: "application/octet-stream"
-error: 0
#hashName: null
path: "C:\Windows\Temp"
filename: "pALAWPNYcMg4pm1w8EINqvURTuYH8x-metaRmFjZWJvb2stMDAxOS5qcGc=-.jpg"
basename: "phpB58F.tmp"
pathname: "C:\Windows\Temp\phpB58F.tmp"
extension: "tmp"
realPath: "C:\wamp64\www\cbcc-website\storage\app\livewire-tmp/pALAWPNYcMg4pm1w8EINqvURTuYH8x-metaRmFjZWJvb2stMDAxOS5qcGc=-.jpg"
size: 554154
writable: false
readable: false
executable: false
file: false
dir: false
link: false
}
1 => Livewire\TemporaryUploadedFile {#1438 ▶}
2 => Livewire\TemporaryUploadedFile {#1436 ▶}
]
and this is my store function
public function store(){
dd($this->gallery_image);
$action = '';
$data = $this->validate([
'gallery_image.*' => 'image|max:1024',
]);
if(!empty($this->gallery_image)){
foreach ($this->gallery_image as $images) {
$images->store('Gallery');
}
}
if($this->galleryId){
Gallery::find($this->galleryId)->update($data);
$action = 'edit';
}else{
Gallery::create($data);
$action = 'store';
}
$this->emit('showEmitedFlashMessage', $action);
$this->resetInputFields();
$this->emit('refreshParent');
$this->emit('closeGalleryModal');
}
Is there any better way to this? Thank you.

Answer 1

First of all, make sure you're using WithFileUploads in your component.
It doesn't look like you're saving the files to disk anywhere in your code, all you're doing is recording the file upload to the database.
This is how I'm doing it for a thing I just wrote. In this scenario the public variable uploaded files is wire:bound to your image field, and setup step is the entity that the files table is referencing. My code calls this to actually store the files to disk. It's not complete, because i don't have thumbnail resizing in yet, but it should still give you a good idea of how to do it.
public function saveUploadedFiles() {
if (!empty($this->uploaded_files)) {
foreach ($this->uploaded_files as $file) {
$this->active_file = new File;
$this->active_file->filetype = $file->getMimeType();
$this->active_file->filename = Str::uuid()->toString();
$this->active_file->filesize = $file->getSize();
$this->active_file->order = 0;
$this->active_file->filepath = '/files/setupsteps/' . $this->active_file->filename;
if (strpos($this->active_file->filetype, 'mage') !== false) {
$this->active_file->thumbnail = '/files/thumbnails/setupsteps/' . $this->active_file->filename;
} else {
$this->active_file->thumbnail = asset('images/placeholder.jpg');
}
$this->active_file->created_by = auth()->id();
$this->active_file->updated_by = auth()->id();
$this->uploadFile($file);
$this->active_step->files()->save($this->active_file);
}
$this->active_step->touch();
$this->files = $this->active_step->files;
}
}
public function uploadFile($file) {
$file->storeAs('files/setupsteps/',$this->active_file->filename,'public');
if (strpos($this->active_file->type,'image') !== false){
$file->storeAs('files/thumbnails/setupsteps/',$this->active_file->filename,'public');
}
}