Laravel 5.6 – Multiple File Upload With dropzone.js

Laravel 5.6 – Multiple File Upload With dropzone.js

In this post we will give you information about Laravel 5.6 – Multiple File Upload With dropzone.js. Hear we will give you detail about Laravel 5.6 – Multiple File Upload With dropzone.jsAnd how to use it also give you demo for it if it is necessary.

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 is also reusable so you can use this same in your another or any project.



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', 'HomeController@multifileupload')->name('multifileupload');
Route::post('multifileupload', 'HomeController@store')->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 in this blade file.


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


1.) HTML




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

@endsection
@section('content')
<div >
  <div >
    <div >
      <div >
        <div >
          <div >
            <div >
              <strong>Laravel - 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


Now add this css 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


Now add this css 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 Laravel’s Forums

Hope this and post will helped you for implement Laravel 5.6 – Multiple File Upload With dropzone.js. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

10  +    =  13

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US