In this section we will see how to use multiple images in laravel 10.
Step 1: Create Laravel Project
Run below command to create laravel project.
composer create-project laravel/laravel project_name
Now, you have to connect the laravel app to the database, hence open the .env configuration file and add the database credentials as suggested below.
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password
Step 2: Install Laravel Breeze
Install laravel breeze via composer:
composer require laravel/breeze --dev
Next, run below command.
php artisan breeze:install
And final install Dependencies
npm install && npm run dev
php artisan migrate
Step 3: Create Blog Modal Migration and Controller
Run below command to create model, migration and controller
php artisan make:model Blog -mcr
For multiple images give text method for long text and store multiple images.
create_blogs_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('blogs', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('images')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('blogs');
}
};
For multiple image give images casts to array.
app/Models/Blog.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Blog extends Model
{
use HasFactory;
protected $fillable = [
'title',
'images'
];
protected $casts = [
'images' => 'array'
];
}
web.php
Route::resource('blogs', BlogController::class);
We will store multiple images in array format. first you need to create empty array and run for each you can also you $request->hasFile('image')
app/Http/Controllers/BlogController.php
<?php
namespace App\Http\Controllers;
use App\Models\Blog;
use Illuminate\Http\Request;
class BlogController extends Controller
{
/**
* Display a listing of the resource.
*/
public function index()
{
$blogs = Blog::all();
return view('blogs.index', compact('blogs'));
}
/**
* Show the form for creating a new resource.
*/
public function create()
{
return view('blogs.create');
}
/**
* Store a newly created resource in storage.
*/
public function store(Request $request)
{
$data = $request->validate([
'title' => 'required|string|max:255',
'images' => 'required|array'
]);
$images = [];
foreach ($data['images'] as $image) {
$fileName = uniqid() . '.' . $image->getClientOriginalExtension();
$image_path = $image->storeAs('images', $fileName, 'public');
array_push($images, $image_path);
}
$data['images'] = $images;
Blog::create($data);
return redirect()->route('blogs.index');
}
/**
* Display the specified resource.
*/
public function show(Blog $blog)
{
//
}
/**
* Show the form for editing the specified resource.
*/
public function edit(Blog $blog)
{
//
}
/**
* Update the specified resource in storage.
*/
public function update(Request $request, Blog $blog)
{
//
}
/**
* Remove the specified resource from storage.
*/
public function destroy(Blog $blog)
{
//
}
}
Step 4: Storage link image
Run below command to link your public storage.
php artisan storage:link
Step 5: Create Blog Blade View Files
You need to add enctype="multipart/form-data" in form also give images name in array images[] and add accept multiple input
views/blogs/create.blade.php
<x-app-layout>
<x-slot name="header">
<h2 class="text-xl font-semibold leading-tight text-gray-800">
{{ __('Blog Create') }}
</h2>
</x-slot>
<div class="py-12">
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
<form method="POST" action="{{ route('blogs.store') }}" enctype="multipart/form-data">
@csrf
<div class="mb-6">
<label class="block">
<span class="text-gray-700">Title</span>
<input type="text" name="title" class="block w-full @error('title') border-red-500 @enderror mt-1 rounded-md" placeholder="" value="{{old('title')}}" />
</label>
@error('title')
<div class="text-sm text-red-600">{{ $message }}</div>
@enderror
</div>
<div class="mb-4">
<label class="block">
<span class="text-gray-700">Images</span>
<input type="file" name="images[]" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100" multiple />
</label>
@error('images')
<div class="text-sm text-red-600">{{ $message }}</div>
@enderror
</div>
<x-primary-button class="ml-3">
{{ __('Submit') }}
</x-primary-button>
</form>
</div>
</div>
</div>
</div>
</x-app-layout>
laravel 10 multiple Images upload
There are multiple ways you can show multiple image. We will use multiple foreach
views/blogs/index.blade.php
<x-app-layout>
<x-slot name="header">
<h2 class="text-xl font-semibold leading-tight text-gray-800">
{{ __('Blogs Index') }}
</h2>
</x-slot>
<div class="py-12">
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
<div class="mt-1 mb-4">
<a class="px-2 py-2 text-sm text-white bg-blue-600 rounded" href="{{ route('blogs.create') }}">{{ __('Add Images') }}</a>
</div>
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3">
#
</th>
<th scope="col" class="px-6 py-3">
Title
</th>
<th scope="col" class="px-6 py-3">
Image
</th>
</tr>
</thead>
<tbody>
@foreach ($blogs as $blog)
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
{{$blog->id}}
</th>
<td class="px-6 py-4">
{{$blog->title}}
</td>
<td class="flex gap-4 px-6 py-4">
@foreach($blog->images as $image)
<img src="{{ asset('/storage/' . $image) }}" alt="multiple image" class="w-20 h-20 border border-blue-600">
@endforeach
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</x-app-layout>
multiple image in laravel 10
