Download Laravel App
composer create-project --prefer-dist laravel/laravel my-app
C:\xampp\htdocs\laravel>composer create-project --prefer-dist laravel/laravel my-app
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=
Create Controller
php artisan make:controller MultiImageUploadController
C:\xampp\htdocs\laravel\my-app>php artisan make:controller MultiImageUploadController
//C:\xampp\htdocs\laravel\my-app>php artisan make:controller MultiImageUploadController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\ImageUpload;
class MultiImageUploadController extends Controller
{
public function upload() {
return view('multiupload');
}
public function fileStore(Request $request) {
$image = $request->file('file');
$imageName = $image->getClientOriginalName();
$image->move(public_path('images'),$imageName);
$imageUpload = new ImageUpload();
$imageUpload->filename = $imageName;
$imageUpload->save();
return response()->json(['success'=>$imageName]);
}
}
Database Migration php artisan make:model ImageUpload -m
C:\xampp\htdocs\laravel\my-app>php artisan make:model ImageUpload -m
database/migrations/create_image_uploads_table.php
//database/migrations/create_image_uploads_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up()
{
Schema::create('image_uploads', function (Blueprint $table) {
$table->increments('id');
$table->text('filename');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('image_uploads');
}
};
run this migration C:\xampp\htdocs\laravel\my-app>php artisan migrate
Create a view file
resources/views/multiupload.blade.php
dropzone
Dropzone.js is one of the most popular drag and drop JavaScript libraries. It is free, fully open source, and makes it easy for you to handle dropped files on your website.
https://www.dropzone.dev/
CDN : https://cdnjs.com/libraries/dropzone/5.9.0
Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
jquery
https://www.jsdelivr.com/package/npm/jquery
//resources/views/multiupload.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 Multiple Upload Images using Dropzone drag and drop</title>
<meta name="_token" content="{{csrf_token()}}" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.0/dropzone.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.2/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.0/dropzone.js"></script>
</head>
<body>
<div class="container">
<p><h1>Laravel 9 Multiple Upload Images using Dropzone drag and drop</h1></p>
<form method="post" action="{{url('image/upload/store')}}" enctype="multipart/form-data" class="dropzone" id="dropzone">
@csrf
</form>
<script type="text/javascript">
Dropzone.options.dropzone =
{
maxFilesize: 12,
renameFile: function(file) {
var dt = new Date();
var time = dt.getTime();
return time+file.name;
},
acceptedFiles: ".jpeg,.jpg,.png,.gif",
addRemoveLinks: true,
timeout: 5000,
success: function(file, response) {
console.log(response);
},
error: function(file, response){
return false;
}
};
</script>
</body>
</html>
Routes routes/web.php
//routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\MultiImageUploadController;
Route::get('/', function () {
return view('welcome');
});
Route::get('image/upload', [MultiImageUploadController::class, 'upload']);
Route::post('image/upload/store', [MultiImageUploadController::class, 'fileStore']);
Run C:\xampp\htdocs\laravel\my-app>php artisan serve Starting Laravel development server: http://127.0.0.1:8000
