How to store single and multiple image using livewire

Store image without selecting radio button

Below is an example of how you can create a form using Livewire to upload single and multiple images along with an input title. We'll create a Livewire component called ImageUpload for this purpose:

First, create the Livewire component:

php artisan make:livewire ImageUpload

In your ImageUpload.php Livewire component, define the necessary properties and methods to handle the file upload:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithFileUploads;

class ImageUpload extends Component
{
    use WithFileUploads;

    public $title;
    public $image;
    public $images = [];

    public function render()
    {
        return view('livewire.image-upload');
    }

    public function save()
    {
        // Validate input fields
        $this->validate([
            'title' => 'required',
            'image' => 'image|max:1024', // Max size 1MB
            'images.*' => 'image|max:1024', // Max size 1MB for each image in array
        ]);

        // Save single image
        $imageName = $this->image->store('images');

        // Save multiple images
        foreach ($this->images as $image) {
            $imageName = $image->store('images');
        }

        // You can now save $this->title and $imageName to your database or perform any other operations
    }
}

Create a Blade view file resources/views/livewire/image-upload.blade.php to display the form:

<div>
    <form wire:submit.prevent="save">
        <div>
            <label for="title">Title</label>
            <input type="text" wire:model.defer="title" id="title">
            @error('title') <span class="error">{{ $message }}</span> @enderror
        </div>

        <div>
            <label for="image">Single Image</label>
            <input type="file" wire:model="image" id="image">
            @error('image') <span class="error">{{ $message }}</span> @enderror
        </div>

        <div>
            <label for="images">Multiple Images</label>
            <input type="file" wire:model="images" id="images" multiple>
            @error('images.*') <span class="error">{{ $message }}</span> @enderror
        </div>

        <button type="submit">Submit</button>
    </form>
</div>

Include the Livewire component in your Blade view or wherever you want to display the form:

<div>
    @livewire('image-upload')
</div>

This Livewire component allows users to upload a single image along with a title and also provides an option to upload multiple images. The uploaded images are temporarily stored in the public/storage directory by default, and you can then save their paths along with the title to your database or perform any other operations as needed. Make sure to adjust the file storage and validation rules according to your application's requirements.

Store image after selecting radio button

To implement the functionality where clicking on a radio button will show/hide the respective image upload form (single or multiple), you can utilize Livewire's reactive properties and methods. Here's how you can modify the Livewire component to achieve this:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithFileUploads;

class ImageUpload extends Component
{
    use WithFileUploads;

    public $title;
    public $singleImage;
    public $multipleImages = [];

    public function render()
    {
        return view('livewire.image-upload');
    }

    public function save()
    {
        // Validate input fields based on selected option
        $rules = [
            'title' => 'required',
        ];

        if ($this->singleImage) {
            $rules['image'] = 'image|max:1024'; // Max size 1MB
        } else {
            $rules['images.*'] = 'image|max:1024'; // Max size 1MB for each image in array
        }

        $this->validate($rules);

        // Save single image
        if ($this->singleImage) {
            $imageName = $this->image->store('images');
        }

        // Save multiple images
        foreach ($this->multipleImages as $image) {
            $imageName = $image->store('images');
        }

        // You can now save $this->title and $imageName to your database or perform any other operations
    }
}

In the Blade view resources/views/livewire/image-upload.blade.php, you can add the radio buttons and show/hide the respective image upload inputs based on the selected option:

<div>
    <form wire:submit.prevent="save">
        <div>
            <label>Title</label>
            <input type="text" wire:model.defer="title">
            @error('title') <span class="error">{{ $message }}</span> @enderror
        </div>

        <div>
            <label>Upload Option:</label><br>
            <input type="radio" wire:model="singleImage" value="1"> Single Image
            <input type="radio" wire:model="singleImage" value="0"> Multiple Images
        </div>

        @if($singleImage)
            <div>
                <label>Single Image</label>
                <input type="file" wire:model="image">
                @error('image') <span class="error">{{ $message }}</span> @enderror
            </div>
        @else
            <div>
                <label>Multiple Images</label>
                <input type="file" wire:model="multipleImages" multiple>
                @error('multipleImages.*') <span class="error">{{ $message }}</span> @enderror
            </div>
        @endif

        <button type="submit">Submit</button>
    </form>
</div>

With this setup, selecting the "Single Image" radio button will display the input field for uploading a single image, while selecting the "Multiple Images" radio button will show the input field for uploading multiple images. The wire:model directive is used to bind the radio button selection to the $singleImage property in the Livewire component. Based on the value of $singleImage, the appropriate image upload input is rendered in the Blade view.