Laravel Dropzonejs Multiple File Upload using jQuery – Programming

Laravel Dropzonejs Multiple File Upload using jQuery – Programming

In this post we will give you information about Laravel Dropzonejs Multiple File Upload using jQuery – Programming. Hear we will give you detail about Laravel Dropzonejs Multiple File Upload using jQuery – ProgrammingAnd how to use it also give you demo for it if it is necessary.

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.

Another must read:  Laravel 5.8 Set file folder storage permissions

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:

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

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 :

Another must read:  Laravel 6.2 Dropzone Multiple Image Upload Tutorial

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.

Hope this code and post will helped you for implement Laravel Dropzonejs Multiple File Upload using jQuery – Programming. 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 code 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 *

28  +    =  36

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