If you are looking to implement a multiple image uploading system using Laravel and Livewire, this tutorial is perfect for you. In this step-by-step guide, you will learn how to upload multiple images in Laravel 10 applications using the Livewire package.
Handling multiple image uploads can be a common requirement in web applications, and Livewire simplifies the process by providing real-time interactivity without page refreshes. With this tutorial, you will be able to create a seamless and efficient multiple image uploading feature.
Laravel 10 Livewire: Multiple Images Upload Example
Steps to handle multiple image uploads with Livewire in your Laravel 10 application.
- Step 1 – Setup New Laravel 10 Application
- Step 2 – Setup Database
- Step 3 – Create Model & Migration
- Step 4 – Add Routes
- Step 5 – Installing Livewire Package
- Step 6 – Create Livewire Multiple Image Upload Components
- Step 7 – Import Component in Blade Views
- Step 8 – Start Development Server
- Step 9 – Run This App On Browser
Step 1 – Setup New Laravel 10 Application
Visit to local webserver directory using the following command:
//for windows user
cd xampp/htdocs
//for ubuntu user
cd var/www/html
After that, install laravel latest application using the following command:
composer create-project --prefer-dist laravel/laravel blog
Step 2 – Setup Database
Once you have installed laravel application on your server. Then find .env file in root directory of project or laravel app and configure database detail like the following:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=db name DB_USERNAME=db user name DB_PASSWORD=db password
Step 3 – Create Model & Migration
Execute the following command on the command prompt to create a model and migration file:
php artisan make:model Image -m
The above command will create two files into laravel livewire multiple image upload application, which is located inside the following locations:
- /app/Models/Image.php
- /database/migrations/create_contacts_table.php
Now, find Image.php model file inside /app/Models directory. And open it then add the fillable property code into Image.php file, like following:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Image extends Model
{
use HasFactory;
protected $fillable = [
'title'
];
}
Then, find create_images_table.php file inside /database/migrations/ directory. Then open this file and add the following code into function up() on this file:
public function up()
{
Schema::create('contacts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->timestamps();
});
}
Now, open again terminal and type the following command on cmd to create tables into selected database:
php artisan migrate
Step 4 – Add Routes
To open web.php file, which is located inside routes directory. Then add the following routes into web.php file:
use App\Http\Livewire\MultipleImageUpload;
Route::get('livewire-multiple-image-upload', MultipleImageUpload::class);
Step 5 – Installing Livewire Package
Execute the following command on the command prompt to install livewire package in laravel app:
composer require livewire/livewireThen install node js package:
npm install
Next run npm
npm run dev
Now, run the database migration command:
php artisan migrate
Step 6 – Create Livewire Multiple Image Upload Components
Execute the following command on the command prompt to create livewire components in laravel app:
php artisan make:livewire MultipleImageUpload
The above command will create two files, which is located on the following locations:
app/Http/Livewire/MultipleImageUpload.php resources/views/livewire/multiple-image-upload.blade.php
So, open MultipleImageUpload.php, which is located inside app/http/Livewire directory and add the following code into it:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithFileUploads;
use App\Models\Image;
class MultipleImageUpload extends Component
{
use WithFileUploads;
public $images = [];
public function render()
{
return view('livewire.home');
}
public function store()
{
$this->validate([
'images.*' => 'image|max:1024', // 1MB Max
]);
foreach ($this->images as $key => $image) {
$this->images[$key] = $image->store('images','public');
}
$this->images = json_encode($this->images);
Image::create(['title' => $this->images]);
session()->flash('message', 'Images has been successfully Uploaded.');
return redirect()->to('/livewire-multiple-image-upload');
}
}
Next, open multiple-image-upload.blade.php, which is located inside resources/views/livewire/ directory and add the following code into it:
<div>
<form>
<div class=" add-input">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="file" class="form-control" wire:model="images" multiple>
@error('image.*') <span class="text-danger error">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-12 text-center">
<button class="btn text-white btn-success" wire:click.prevent="store">Save</button>
</div>
</div>
</div>
</form>
</div>
Step 7 – Import Component in Blade Views
Visit to resources/views/livewire directory and create home.blade.php. Then add the following code into it:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 10 Livewire Multiple Image Upload Tutorial - Tutsmake.com</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row mt-5 justify-content-center">
<div class="mt-5 col-md-8">
<div class="card">
<div class="card-header bg-success">
<h2 class="text-white">Laravel Livewire Multiple Image Upload Example - Tutsmake.com</h2>
</div>
<div class="card-body">
@livewire('image-upload')
</div>
</div>
</div>
</div>
</div>
@livewireScripts
</body>
</html>
Step 8 – Start Development Server
Execute the following command on the command prompt to start the development server for laravel livewire multiple image upload app:
php artisan serve
Step 9 – Run This App On Browser
In step 9, open browser and fire the following url into browser:
http://127.0.0.1:8000/livewire-multiple-image-upload
Conclusion
By following this tutorial, you will gain a comprehensive understanding of how to leverage Livewire for handling multiple image uploads in your Laravel 10 applications. You will be able to create a user-friendly and efficient multiple image uploading system, enhancing the overall functionality of your application.
