Laravel Dropzonejs Multiple File Upload using jQuery

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 :

• Technology
• Google Adsense
• Programming

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.