Today, We want to share with you Laravel Dropzonejs Multiple File Upload using jQuery.In this post we will show you Laravel 5.7 – Multiple File Upload With dropzone.js, hear for Laravel 5.7 Dropzone Image Upload Tutorial With Example we will give you demo and example for implement.In this post, we will learn about Multiple Image Uploader with Laravel 5.7 and Dropzone.js with an example.
Laravel Dropzonejs Multiple File Upload using jQuery
There are the Following The simple About Laravel Dropzonejs Multiple File Upload using jQuery Full Information With Example and source code.
As I will cover this Post with live Working example to develop AJAX multiple file upload in Laravel 5.7 Dropzone, so the Laravel 5.7 – Multiple File Upload With dropzone.js for this example is following below.
Define a Laravel Route:
Route::get('dropMultipleflupload', '[email protected]')->name('dropMultipleflupload');
Route::post('dropMultipleflupload', '[email protected]')->name('dropMultipleflupload');
Add Two Method In ProductController:
ProductController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use Session;
class ProductController extends Controller
{
public function dropMultipleflupload()
{
return view('dropzoneJs');
}
public function store(Request $request)
{
$image = $request->file('file');
$imageName = time().$image->getClientOriginalName();
$upload_success = $image->move(public_path('images'),$imageName);
if ($upload_success) {
return response()->json($upload_success, 200);
}
// Else, return error 400
else {
return response()->json('error', 400);
}
}
}
Save the path public/images
Create View File:
Include HTML source code
@extends('layouts.app')
@section('style')
@endsection
@section('content')
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card card-default">
<div class="card-header">
<div class="row">
<div class="col-md-12">
<strong>Laravelcode - Multiple files uploading using dropzoneJs</strong>
</div>
</div>
</div>
<div class="card-body">
<form action="{{ route('dropzoneJs') }}" enctype="multipart/form-data" class="dropzone" id="fileupload" method="POST">
@csrf
<div class="fallback">
<input name="file" type="files" multiple accept="image/jpeg, image/png, image/jpg" />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('jquery')
@endsection
Add your CSS Source code
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/basic.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.dropzone {
border:2px dashed #999999;
border-radius: 10px;
}
.dropzone .dz-default.dz-message {
height: 171px;
background-size: 132px 132px;
margin-top: -101.5px;
background-position-x:center;
}
.dropzone .dz-default.dz-message span {
display: block;
margin-top: 145px;
font-size: 20px;
text-align: center;
}
</style>
Add your jQuery Source code
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>
<script type="text/javascript">
Dropzone.options.fileupload = {
accept: function (file, done) {
if (file.type != "application/vnd.ms-excel" && file.type != "image/jpeg, image/png, image/jpg") {
done("Error! Files of this type are not accepted");
} else {
done();
}
}
}
Dropzone.options.fileupload = {
acceptedFiles: "image/jpeg, image/png, image/jpg"
}
if (typeof Dropzone != 'undefined') {
Dropzone.autoDiscover = false;
}
;
(function ($, window, undefined) {
"use strict";
$(document).ready(function () {
// Dropzone Example
if (typeof Dropzone != 'undefined') {
if ($("#fileupload").length) {
var dz = new Dropzone("#fileupload"),
dropzone_dtls = $("#dropzone_dtls"),
productTypes = {
uploaded: 0,
errors: 0
};
var $files_base = $('<tr><td class="name"></td><td class="size"></td><td class="type"></td><td class="productTypes"></td></tr>');
dz.on("success", function (file, responseText) {
var _$files_base = $files_base.clone();
_$files_base.addClass('success');
_$files_base.find('.name').html(file.name);
if (file.size < 1024) {
_$files_base.find('.size').html(parseInt(file.size) + ' KB');
} else {
_$files_base.find('.size').html(parseInt(file.size / 1024, 10) + ' KB');
}
_$files_base.find('.type').html(file.type);
_$files_base.find('.productTypes').html('Uploaded <i class="entypo-check"></i>');
dropzone_dtls.find('tbody').append(_$files_base);
productTypes.uploaded++;
dropzone_dtls.find('tfoot td').html('<span class="label label-success">' + productTypes.uploaded + ' uploaded</span> <span class="label label-danger">' + productTypes.errors + ' not uploaded</span>');
toastr.success('Your File Uploaded Successfully!!', 'Success Alert', {
timeOut: 50000000
});
})
.on('error', function (file) {
var _$files_base = $files_base.clone();
dropzone_dtls.removeClass('hidden');
_$files_base.addClass('danger');
_$files_base.find('.name').html(file.name);
_$files_base.find('.size').html(parseInt(file.size / 1024, 10) + ' KB');
_$files_base.find('.type').html(file.type);
_$files_base.find('.productTypes').html('Uploaded <i class="entypo-cancel"></i>');
dropzone_dtls.find('tbody').append(_$files_base);
productTypes.errors++;
dropzone_dtls.find('tfoot td').html('<span class="label label-success">' + productTypes.uploaded + ' uploaded</span> <span class="label label-danger">' + productTypes.errors + ' not uploaded</span>');
toastr.error('Your Laravel File Uploaded Not Successfully!!', 'Error Alert', {
timeOut: 5000
});
});
}
}
});
})(jQuery, window);
</script>
Run your Laravel Project
php artisan serve http://localhost:8000/dropMultipleflupload
Angular 6 CRUD Operations Application Tutorials
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about Laravel Dropzonejs Multiple File Upload using jQuery.
I would like to have feedback on my Pakainfo.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.
Related FAQ
Here are some more FAQ related to this Article: