How To Upload Multiple Image In Laravel 8
In this article, we will see how to upload multiple images in laravel 8. here, we will see a tutorial on multiple image uploads in laravel 8. Also, we will see upload multiple images with validation in laravel 8 or laravel multiple file upload validation.
So, let's see upload multiple images with a preview in laravel 8 or multiple images upload in laravel 8.
Step 1: Install Laravel 8 for Upload Multiple Images
Step 2: Add Model and Migration
Step 3: Create Controller
Step 4: Create Route
Step 5: Create Blade File
In this step, we will install the laravel 8 app(if required) using the below command.
composer create-project --prefer-dist laravel/laravel blog
Now, we will create a database, model, and migration.
php artisan make:model File -m
Now, edit the model like the below code.
app/Models/File.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class File extends Model
{
use HasFactory;
protected $fillable = [
'filenames'
];
public function setFilenamesAttribute($value)
{
$this->attributes['filenames'] = json_encode($value);
}
}
Now, add the below code in the migration file.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateFilesTable extends Migration
{
public function up()
{
Schema::create('files', function (Blueprint $table) {
$table->id();
$table->string('filenames');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('files');
}
}
Now, migrate the table using the below command.
php artisan migrate
In this step, we will create FileController.
Note: create a "files" folder in your public directory to save your images.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\File;
class FileController extends Controller
{
public function create()
{
return view('index');
}
public function store(Request $request)
{
$this->validate($request, [
'filenames' => 'required',
'filenames.*' => 'image'
]);
$files = [];
if($request->hasfile('filenames'))
{
foreach($request->file('filenames') as $file)
{
$name = time().rand(1,50).'.'.$file->extension();
$file->move(public_path('files'), $name);
$files[] = $name;
}
}
$file= new File();
$file->filenames = $files;
$file->save();
return back()->with('success', 'Images are successfully uploaded');
}
}
In this step, we will create routes in the web.php file.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FileController;
Route::get('file', [FileController::class, 'create']);
Route::post('file', [FileController::class, 'store']);
Now, we will create the index.blade.php file in the given path resources/views/index.blade.php.
<html lang="en">
<head>
<title>How To Upload Multiple Image In Laravel 8 - Techsolutionstuff</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container lst">
@if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Error!</strong> something went wrong <br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
@if(session('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
@endif
<h3 class="well">How To Upload Multiple Image In Laravel 8 - Techsolutionstuff</h3>
<form method="post" action="{{url('file')}}" enctype="multipart/form-data">
@csrf
<div class="input-group demo control-group lst increment" >
<input type="file" name="filenames[]" class="myfrm form-control">
<div class="input-group-btn">
<button class="btn btn-success" type="button">Add</button>
</div>
</div>
<div class="clone hide">
<div class="demo control-group lst input-group" style="margin-top:10px">
<input type="file" name="filenames[]" class="myfrm form-control">
<div class="input-group-btn">
<button class="btn btn-danger remove_btn" type="button">Remove</button>
</div>
</div>
</div>
<button type="submit" class="btn btn-success submit_btn" style="margin-top:10px">Submit</button>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".submit_btn").click(function(){
var lsthmtl = $(".clone").html();
$(".increment").after(lsthmtl);
});
$("body").on("click",".remove_btn",function(){
$(this).parents(".demo").remove();
});
});
</script>
</body>
</html>
You might also like:
- Read Also: How To File Upload Using Node.js
- Read Also: Laravel 8 Add Watermark On Image
- Read Also: Dropzone Image Upload Tutorial In Laravel 7/8
- Read Also: Laravel Summernote Editor Image Upload Example
