anonymouse703's avatar

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">&times;</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');

    }
0 likes
0 replies

Please or to participate in this conversation.