inchirags@gmail.com Chirag's Laravel Tutorial https://www.chirags.in
*********************************************************************************************
Laravel 11 Drag and Drop File Upload with Dropzone JS
*********************************************************************************************
YouTube Video:
Step 1: Create Laravel project
composer create-project --prefer-dist laravel/laravel laravel_11_file_upload_dropzonejs
cd laravel_11_file_upload_dropzonejs
Step 2: Create Migration and Model
php artisan make:model Image -m
database/migrations/xxxxxxx_create_images_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('images', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('filesize');
$table->string('path');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('images');
}
};
--app/Models/Image.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Image extends Model
{
use HasFactory;
protected $fillable = [
'name', 'filesize', 'path'
];
}
Step 3: Configure database details in .env file
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_11_file_upload_dropzonejs
DB_USERNAME=root
DB_PASSWORD=admin@123
Step 4: Run the migration for create the database and tables
php artisan migrate
Step 5: Create Controller
php artisan make:controller DropzoneJSController
Next, let's update the following code to the Controller file.
app/Http/Controllers/DropzoneJSController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\JsonResponse;
use App\Models\Image;
class DropzoneJSController extends Controller
{
public function index(): View
{
$images = Image::all();
return view('dropzoneview', compact('images'));
}
public function store(Request $request): JsonResponse
{
$images = [];
foreach($request->file('files') as $image) {
$imageName = time() . '_' . uniqid() . '.' . $image->getClientOriginalExtension();
// Move the image to path in public folder
$image->move(public_path('images'), $imageName);
$images[] = [
'name' => $imageName,
'path' => asset('/images/'. $imageName),
'filesize' => filesize(public_path('images/'.$imageName))
];
}
// Insert the images to database
foreach ($images as $imageData) {
Image::create($imageData);
}
return response()->json(['success'=>$images]);
}
}
Step 6: Create Routes
--routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\DropzoneJSController;
Route::get('dropzoneview', [DropzoneJSController::class, 'index']);
Route::post('dropzoneview/store', [DropzoneJSController::class, 'store'])->name('dropzoneview.store');
Step 7: Create Blade File
--resources/views/dropzoneview.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 11 Drag and Drop File Upload with Dropzone JS - chirags.in</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://unpkg.com/dropzone@6.0.0-beta.2/dist/dropzone-min.js"></script>
<link href="https://unpkg.com/dropzone@6.0.0-beta.2/dist/dropzone.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.dz-preview .dz-image img{
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
</style>
</head>
<body>
<div class="container">
<div class="card mt-5">
<h3 class="card-header p-3">Laravel 11 Drag and Drop File Upload with Dropzone JS - chirags.in</h3>
<div class="card-body">
<form action="{{ route('dropzoneview.store') }}" method="post" enctype="multipart/form-data" id="image-upload" class="dropzone">
@csrf
<div>
<h4>Upload Multiple Images By Click On Box area</h4>
</div>
</form>
<button id="uploadFile" class="btn btn-success mt-1">Upload Images</button>
</div>
</div>
</div>
<script type="text/javascript">
Dropzone.autoDiscover = false;
var images = {{ Js::from($images) }};
var myDropzone = new Dropzone(".dropzone", {
init: function() {
myDropzone = this;
$.each(images, function(key,value) {
var mockFile = { name: value.name, size: value.filesize};
myDropzone.emit("addedfile", mockFile);
myDropzone.emit("thumbnail", mockFile, value.path);
myDropzone.emit("complete", mockFile);
});
},
autoProcessQueue: false,
paramName: "files",
uploadMultiple: true,
maxFilesize: 3,
acceptedFiles: ".jpeg,.jpg,.png,.gif"
});
$('#uploadFile').click(function(){
myDropzone.processQueue();
});
</script>
</body>
</html>
Step 8: Run Laravel App:
php artisan serve
Now, Go to your web browser, open the below URL:
http://localhost:8000/dropzoneview
For any doubts and query, please write on YouTube video comments section.
Note : Flow the Process shown in video.
Please, Subscribe and like for more videos:
https://www.youtube.com/@chiragstutorial
Don't forget to, Follow, Like, Share &, Comment
Thanks & Regards,
Chitt Ranjan Mahto "Chirag"
_____________________________________________________________________
Note: All scripts used in this demo will be available in our website.
Link will be available in description.
#chirags
#chiragstutorial
#chiragslaraveltutorial
#chiragslaraveltutorials
#laraveltutorial
#laravel11
#laravelcourse
#installlaravel
#laravel_tutorial
#laravelphp
#chiragdbatutorial
#chiragsdbatutorial
#chriagstutorial
#laravel11facebooklogin
#laravelsocialitelogin
chirags, chirags tutorial, chirags laravel tutorial, chirags Laravel tutorial, Laravel tutorial, laravel11, Laravel course, install laravel, laravel_tutorial, Laravel php, chirags dba tutorial, chirags tutorial, chirag tutorial, Laravel 11 Facebook Login, Facebook Login with Laravel 11, Facebook Login with Socialite Login,
