Laravel Dropzonejs Multiple File Upload using jQuery – Programming

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

use IlluminateHttpRequest;
use AppHttpRequests;
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 >
  <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	

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 ></td><td ></td><td ></td><td ></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 ></i>');

            dropzone_dtls.find('tbody').append(_$files_base);

            productTypes.uploaded++;

            dropzone_dtls.find('tfoot td').html('<span >' + productTypes.uploaded + ' uploaded</span> <span >' + 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 ></i>');

            dropzone_dtls.find('tbody').append(_$files_base);

            productTypes.errors++;

            dropzone_dtls.find('tfoot td').html('<span >' + productTypes.uploaded + ' uploaded</span> <span >' + 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 onlinecode 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.