Laravel Upload Multiple Images Tutorial Example
Upload Multiple Images in Laravel, In this section, we will explore how to utilize multiple images in Laravel 9. For this tutorial, we will leverage Laravel Breeze and Tailwind CSS. We will store multiple images in text array format. To accomplish the task of uploading multiple images and storing them, we will utilize Laravel File Storage.
Upload Multiple Images in Laravel Example
1. Create Controller and store Image
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/ImageController.php
<?php
namespace App\Http\Controllers;
use App\Models\Product;
use Illuminate\Http\Request;
class ImageController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$products = Product::all();
return view('products.index', compact('products'));
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('products.create');
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$data = $request->validate([
'name' => '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;
Project::create($data);
return redirect()->route('products.index');
}
/**
* Display the specified resource.
*
* @param \App\Models\Product $product
* @return \Illuminate\Http\Response
*/
public function show(Project $project)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param \App\Models\Product $product
* @return \Illuminate\Http\Response
*/
public function edit(Product $product)
//
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param \App\Models\Product $product
* @return \Illuminate\Http\Response
*/
public function update(Request $request, Product $product)
{
//
}
/**
* Remove the specified resource from storage.
*
* @param \App\Models\Product $product
* @return \Illuminate\Http\Response
*/
public function destroy(Product $product)
{
//
}
}
Step 2: Create Project 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
resources/views/product/create.blade.php
<form method="POST" action="{{ route('projects.store') }}" enctype="multipart/form-data">
@csrf
<div class="mb-6">
<label class="block">
<span class="text-gray-700">Name</span>
<input type="text" name="name"
class="block w-full @error('name') border-red-500 @enderror mt-1 rounded-md"
placeholder="" value="{{old('name')}}" />
</label>
@error('name')
<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 mt-1 rounded-md"
placeholder="" multiple/>
</label>
@error('images')
<div class="text-sm text-red-600">{{ $message }}</div>
@enderror
</div>
<button type="submit"
class="text-white bg-blue-600 rounded text-sm px-5 py-2.5">Submit</button>
</form>
Thanks for reading
I do agree with all the ideas you have introduced on your post They are very convincing and will definitely work Still the posts are very short for newbies May just you please prolong them a little from subsequent time Thank you for the post