Today, We want to share with you Laravel 6.2 Dropzone Multiple Image Upload Tutorial.In this post we will show you laravel 6.2 jquery ajax crud example with image upload, hear for Laravel 6.2 Dropzone Image Upload Tutorial we will give you demo and example for implement.In this post, we will learn about Multiple File Upload with Dropzone.js and Laravel MediaLibrary Package with an example.
Laravel 6.2 Dropzone Multiple Image Upload Tutorial
Contents
There are the Following The simple About multiple upload dropzone laravel 6.2 Full Information With Example and source code.
As I will cover this Post with live Working example to develop multiple image upload with dropzone.js in laravel 6.2, so the laravel 6.2 image upload using dropzone is used for this example is following below.
Phase 1 : Install Laravel 6.2 and Basic Configurations
Install Laravel 6.2 and Basic some IMP. Configurations
composer create-project --prefer-dist laravel/laravel adminpanel-api-project
Phase 2 : Create Laravel 6.2 Model, Migration & Controller
php artisan make:model DropzoneMultipleImageUpload -mcr
timestamp_create_image_uploads_table.php
public function up()
{
Schema::create('image_uploads', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('filename');
$table->timestamps();
});
}
php artisan migrate
app/DropzoneMultipleImageUpload.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class DropzoneMultipleImageUpload extends Model
{
protected $fillable = [
'filename'
];
}
app\Http\Controllers\DropzoneMultipleImageUploadController.php
<?php
namespace App\Http\Controllers;
use App\DropzoneMultipleImageUpload;
use Illuminate\Http\Request;
class DropzoneMultipleImageUploadController extends Controller
{
public function upload()
{
return view('dropzone_multiple_image_upload');
}
public function store(Request $request)
{
$image = $request->file('file');
$flImgName = $image->getClientOriginalName();
$image->move(public_path('images'), $flImgName);
$dropzoneMultipleImage = new DropzoneMultipleImageUpload();
$dropzoneMultipleImage->filename = $flImgName;
$dropzoneMultipleImage->save();
return response()->json(['success' => $flImgName]);
}
public function delete(Request $request)
{
$filename = $request->get('filename');
DropzoneMultipleImageUpload::where('filename', $filename)->delete();
$path = public_path() . '/images/' . $filename;
if (file_exists($path)) {
unlink($path);
}
return $filename;
}
}
Phase 3 : Laravel 6.2 Register Routes
routes/web.php
open your route file and add bellow two new routes.
Route::get('upload', '[email protected]');
Route::post('upload/store', '[email protected]');
Route::post('delete', '[email protected]');
Phase 4 : Create Laravel 6.2 Add Blade File
resources/views/dropzone_multiple_image_upload.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>PHP Laravel 6.2 Dropzone Multiple Files Upload Tutorial - www.pakainfo.com</title>
<meta name="_token" content="{{csrf_token()}}"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.js"></script>
</head>
<body>
<div class="container">
<h3>Multiple File Upload with Dropzone.js and Laravel 6.2 MediaLibrary Package</h3>
<div class="text-center" style="margin: 20px 0px 20px 0px;">
<a href="https://beta.mynotepaper.com/" target="_blank" rel="noopener noreferrer"><img src="https://i.imgur.com/pakainfo_web.png"></a><br>
<span class="text-secondary">PHP Laravel 6.2 Dropzone Multiple Image - www.pakainfo.com</span>
</div>
<form method="post" action="{{url('upload/store')}}" enctype="multipart/form-data"
class="dropzone" id="dropzone">
@csrf
</form>
</div>
<script type="text/javascript">
Dropzone.options.dropzone =
{
maxFilesize: 10,
renameFile: function (file) {
var dt = new Date();
var time = dt.getTime();
return time + file.name;
},
acceptedFiles: ".jpeg,.jpg,.png,.gif",
addRemoveLinks: true,
timeout: 352400,
removedfile: function (file) {
var name = file.upload.filename;
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
},
type: 'POST',
url: '{{ url("delete") }}',
data: {filename: name},
success: function (data) {
console.log("Good Luck, your File/Images has been successfully removed!!");
},
error: function (e) {
console.log(e);
}
});
var multiFileUpload;
return (multiFileUpload = file.previewElement) != null ?
multiFileUpload.parentNode.removeChild(file.previewElement) : void 0;
},
success: function (file, response) {
console.log(response);
},
error: function (file, response) {
return false;
}
};
</script>
</body>
</html>
Web Programming Tutorials Example with Demo
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about implement dropzone.js laravel 6.2.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, donβt forget to share.
I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.