Aug 4, 2021
0
Level 6
How to handle multilple images upload and show the temp_url before storing
Hello guys, I want to upload multiple images but before saving it I want to show the uploaded images like in facebook before storing it in the database..
I tried this one but not working instead I got error The gallery_image failed to upload.
This is my upload form in view
<div>
<div class="modal-content">
<form wire:submit.prevent="store" enctype="multipart/form-data">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Gallery</h4>
<a type="button" class="close" data-dismiss="modal">×</a>
</div>
<!-- Modal body -->
<div class=" modal-body">
@if ($gallery_image)
Photo Preview:
@foreach($gallery_image as $image)
<img src="{{ $isUploaded ? $image->temporaryUrl() : url('storage/images/'.$image) }}" width="250" height="300">
@endforeach
@endif
<p>Image:</p>
<div class="custom-file p-3">
<input type="file" wire:model="gallery_image" class="custom-file-input" id="gallery_image" name="gallery_image" multiple>
<label class="custom-file-label" for="customFile">Choose file</label>
@if($errors->has('gallery_image'))
<p style="color:red">{{$errors->first('gallery_image')}}</p>
@endif
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<div class="form-group">
<button type="submit" class="btn btn-primary pull-right">Save</button>
</div>
</div>
</form>
</div>
</div>
and this is my function
public $gallery_image = [];
public $isUploaded = false;
public function updatedGalleryImage(){
$this->isUploaded=true;
}
public function store(){
$action = '';
$data = $this->validate([
'gallery_image.*' => 'image|max:1024',
]);
if(!empty($this->gallery_image)){
$gallery_image = 'gallery_image.' . time() . $this->gallery_image->getClientOriginalName();
$data['gallery_image'] = $gallery_image;
foreach ($this->gallery_image as $image) {
$image->storeAs('public/images', $gallery_image);
}
}
if($this->galleryId){
Loan::find($this->galleryId)->update($data);
$action = 'edit';
}else{
Loan::create($data);
$action = 'store';
}
$this->emit('showEmitedFlashMessage', $action);
$this->resetInputFields();
$this->emit('refreshParent');
$this->emit('closeGalleryModal');
}
Please or to participate in this conversation.