Laravel 5.6 – Multiple File Upload With dropzone.js

Many time you need in your laravel application integration multiple file uploading functionality for upload any file or some specific file. you can done this type of task easily helping of dropzone js. dropzon js give to easy interface for uploading mulriple file uploading with awesome front-end design. how to integration dropzone js in your laravel application. it is so easy task. we are here provide all tutorial step by step so you can integrate or make multiple file uploading in your laravel application.

we are here show to you how to integrate dropzone js in laravel application with some validation and make easy for you. so, please follow some simple step and you can make multiple file uploading in you any project and this code is also reusable so you can use this same code in your another or any project.

[ADDCODE]

After you done all this step then your layour look like following screenshot.

Create Route:

First, we need to create following two route one for display blade and another for store our multi-uploading files

Route::get('multifileupload', '[email protected]')->name('multifileupload');
Route::post('multifileupload', '[email protected]')->name('multifileupload');

Add Two Method In HomeController:

Now, oopen your HomeController.php file and add following two method in it. one for display blade file and secound is for store your multifiles

namespace AppHttpControllers;

use IlluminateHttpRequest;
use AppHttpRequests;
use Session;

class HomeController extends Controller
{
	public function multifileupload()
    {
        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);
        }
    }
}	

Here, your all files store in this path public/images

Create View File:

Now, last things we are create our dropzoneJs.blade.php file in resources/views folder. then add following code in this blade file.

Looking my following code sample i left empty style and jquery section. so, i write this code after blade file code. so when you can integrate it then must be write in one file depend on you.

1.) HTML code

@extends('layouts.app')
@section('style')

@endsection
@section('content')
<div >
  <div >
    <div >
      <div >
        <div >
          <div >
            <div >
              <strong>Laravelcode - Multiple files uploading using dropzoneJs</strong>
            </div>
          </div>
        </div>
        <div >
          <form action="{{ route('dropzoneJs') }}" enctype="multipart/form-data"  id="fileupload" method="POST">
            @csrf
            <div >
              <input name="file" type="files" multiple accept="image/jpeg, image/png, image/jpg" />
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection
@section('jquery')

@endsection	

2.) CSS code

Now add this css code in your style section

<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>

3.) jQuery code

Now add this css code in your jquery section

<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"),
          dze_info = $("#dze_info"),
          status = {
            uploaded: 0,
            errors: 0
          };
        var $f = $('<tr><td ></td><td ></td><td ></td><td ></td></tr>');
        dz.on("success", function (file, responseText) {

            var _$f = $f.clone();

            _$f.addClass('success');

            _$f.find('.name').html(file.name);
            if (file.size < 1024) {
              _$f.find('.size').html(parseInt(file.size) + ' KB');
            } else {
              _$f.find('.size').html(parseInt(file.size / 1024, 10) + ' KB');
            }
            _$f.find('.type').html(file.type);
            _$f.find('.status').html('Uploaded <i ></i>');

            dze_info.find('tbody').append(_$f);

            status.uploaded++;

            dze_info.find('tfoot td').html('<span >' + status.uploaded + ' uploaded</span> <span >' + status.errors + ' not uploaded</span>');

            toastr.success('Your File Uploaded Successfully!!', 'Success Alert', {
              timeOut: 50000000
            });

          })
          .on('error', function (file) {
            var _$f = $f.clone();

            dze_info.removeClass('hidden');

            _$f.addClass('danger');

            _$f.find('.name').html(file.name);
            _$f.find('.size').html(parseInt(file.size / 1024, 10) + ' KB');
            _$f.find('.type').html(file.type);
            _$f.find('.status').html('Uploaded <i ></i>');

            dze_info.find('tbody').append(_$f);

            status.errors++;

            dze_info.find('tfoot td').html('<span >' + status.uploaded + ' uploaded</span> <span >' + status.errors + ' not uploaded</span>');

            toastr.error('Your File Uploaded Not Successfully!!', 'Error Alert', {
              timeOut: 5000
            });
          });
      }
    }
  });
})(jQuery, window); 
</script>

Now we are ready to run our example so run bellow command ro quick run:

php artisan serve

Now you can open bellow URL on your browser:

	
http://localhost:8000/multifileupload

Please also check our demo for Multiple file uploading using DropzoneJS.

We are hope you like this tutorials, if any question regarding any query please post your question in our forums click on bellow link Laravelcode’s Forums