Story

How to upload multiple image in laravel?

Comment (0)

Admin

262

Step 1: Install Laravel Fresh Project

composer create-project --prefer-dist laravel/laravel muiltipleImages

Step 2: Create Route

routes/web.php

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\MultipleImageUploadController;


/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('multiple-image-upload-page', [MultipleImageUploadController::class , 'multipleImageUploadPage'])->name('multiple.image.upload.page');
Route::post('multiple-image-upload', [MultipleImageUploadController::class , 'multipleImageUpload'])->name('multiple.image.upload.post');

Step 3 : Create MultipleIMageUploadController

app/Http/Controllers/FileUploadController.php

<?php

namespace App\Http\Controllers\Admin;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\MultipleImageUpload;

class ProductController extends Controller
{
    public function multipleImageUploadPage()
    {   
        return view('multipleImageUpload');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function multipleImageUpload(Request $request)
    {   
       $data = new Product; 
       $images = array();
       if($request->hasFile('images')){ 
         foreach ($request->file('images') as $key => $image){ 
             $imageName= hexdec(uniqid()).'.'.$image->getClientOriginalExtension();
             $image->move(public_path('images'), $imageName);
             $upload_image='public/images/'.$imageName;
             array_push($images, $upload_image);
         }
        $data->images = json_encode($images); }

}

Step 4 : Create blade file

<!DOCTYPE html>
<html lang="">
  <head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Multiple image upload by nijwel.xyz</title>
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
  </head>
  <body>
	<section class="container" >
	  <div class="card p-2">
		<div class="card-header bg-info">
			<h1 class="text-center p-4">Multiple image upload by nijwel.xyz</h1>
		</div>
		<div class="card-body mt-5">
			<div class="mb-3">
				<label for="formFileMultiple" class="form-label">Multiple files input example</label>
				<input class="form-control" name="images[]" type="file" id="formFileMultiple" multiple>
			</div>
		</div>
	  </div>
	</section>
	<!-- jQuery -->
	<script src="//code.jquery.com/jquery.js"></script>
	<!-- Bootstrap JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 	<script src="Hello World"></script>
  </body>
</html>