article

Wednesday, June 21, 2023

Laravel 10 Multiple Image Upload

Laravel 10 Multiple Image Upload

Download Laravel App

composer create-project --prefer-dist laravel/laravel my-app
C:\xampp\htdocs\laravel10project>composer create-project laravel/laravel laravel10project

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraveldb
DB_USERNAME=root
DB_PASSWORD=

Database Migration
php artisan migrate

C:\xampp\htdocs\laravel\laravel10project>php artisan migrate
Migration table created successfully.

check database table

Create Controller
php artisan make:controller ImageController
C:\xampp\htdocs\laravel\my-app>php artisan make:controller ImageController

app/Http/Controllers/ImageController.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//app/Http/Controllers/ImageController.php
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Illuminate\View\View;
 
class ImageController extends Controller
{
    public function index(): View
    {
        return view('image');
    }
 
    public function imageUpload(Request $request): RedirectResponse
    {
        $request->validate([
            'image.*' => 'required|image|mimes:jpeg,jpg,png,gif,svg|max:5120',
        ]);
 
        foreach ($request->image as $value) {
            $imageName = time().'_'.$value->getClientOriginalName();
            $value->move(public_path('images'),$imageName);
 
            $imageNams[] = $imageName;
        }
 
        return redirect()->back()->withSuccess('You have successfully upload image.')->with('image',$imageNams);
    }
 
}
View Blade
Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css

resources/views/image.blade.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
//resources/views/image.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 10 Multiple Image Upload</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h2>Laravel 10 Multiple Image Upload</h2>
        </div>
        <div class="panel-body">
            @if($message = Session::get('success'))
                <div class="alert alert-success" role="alert">
                    <strong>{{ $message }}</strong>
                </div>
                @foreach(\Session::get('image') as $imgs)
                    <img src="images/{{ $imgs }}">
                @endforeach
            @endif
            <form action="{{ route('image.store') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="mb-3">
                    <label class="form-label">Image:</label>
                    <input type="file" name="image[]" class="form-control @error('image.*') is-invalid @enderror" multiple>
 
                    @error('image.*')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="mb-3">
                    <button type="submit" class="btn btn-success">Upload</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>
Routes
routes/web.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//routes/web.php
<?php
 
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ImageController;
 
Route::get('/', function () {
    return view('welcome');
});
 
Route::controller(ImageController::class)->group(function(){
    Route::get('image-upload','index');
    Route::post('image-upload','imageUpload')->name('image.store');
});
Run C:\xampp\htdocs\laravel\my-app>php artisan serve
Starting Laravel development server: http://127.0.0.1:8000
Posted by ednalan at 12:42 AM . Under .

Related Post