Laravel Redirect To Another URL / Web Page - HTTP Laravel Redirects

Laravel 6.2 Dropzone Multiple Image Upload Tutorial

Today, We want to share with you Laravel 6.2 Dropzone Multiple Image Upload Tutorial.In this post we will show you laravel 6.2 jquery ajax crud example with image upload, hear for Laravel 6.2 Dropzone Image Upload Tutorial we will give you demo and example for implement.In this post, we will learn about Multiple File Upload with Dropzone.js and Laravel MediaLibrary Package with an example.

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

Laravel 6.2 Dropzone Multiple Image Upload Tutorial

There are the Following The simple About multiple upload dropzone laravel 6.2 Full Information With Example and source code.

As I will cover this Post with live Working example to develop multiple image upload with dropzone.js in laravel 6.2, so the laravel 6.2 image upload using dropzone is used for this example is following below.

Phase 1 : Install Laravel 6.2 and Basic Configurations

Install Laravel 6.2 and Basic some IMP. Configurations

composer create-project --prefer-dist laravel/laravel adminpanel-api-project

Phase 2 : Create Laravel 6.2 Model, Migration & Controller

php artisan make:model DropzoneMultipleImageUpload -mcr

timestamp_create_image_uploads_table.php
public function up()
{
    Schema::create('image_uploads', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('filename');
        $table->timestamps();
    });
}

php artisan migrate

app/DropzoneMultipleImageUpload.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class DropzoneMultipleImageUpload extends Model
{
    protected $fillable = [
        'filename'
    ];
}

app\Http\Controllers\DropzoneMultipleImageUploadController.php

<?php

namespace App\Http\Controllers;

use App\DropzoneMultipleImageUpload;
use Illuminate\Http\Request;

class DropzoneMultipleImageUploadController extends Controller
{
    public function upload()
    {
        return view('dropzone_multiple_image_upload');
    }

    public function store(Request $request)
    {
        $image = $request->file('file');
        $flImgName = $image->getClientOriginalName();
        $image->move(public_path('images'), $flImgName);

        $dropzoneMultipleImage = new DropzoneMultipleImageUpload();
        $dropzoneMultipleImage->filename = $flImgName;
        $dropzoneMultipleImage->save();
        return response()->json(['success' => $flImgName]);
    }

    public function delete(Request $request)
    {
        $filename = $request->get('filename');
        DropzoneMultipleImageUpload::where('filename', $filename)->delete();
        $path = public_path() . '/images/' . $filename;
        if (file_exists($path)) {
            unlink($path);
        }
        return $filename;
    }
}

Phase 3 : Laravel 6.2 Register Routes

routes/web.php

open your route file and add bellow two new routes.

Route::get('upload', '[email protected]');
Route::post('upload/store', '[email protected]');
Route::post('delete', '[email protected]');

Phase 4 : Create Laravel 6.2 Add Blade File

resources/views/dropzone_multiple_image_upload.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <title>PHP Laravel 6.2 Dropzone Multiple Files Upload Tutorial - www.pakainfo.com</title>
    <meta name="_token" content="{{csrf_token()}}"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.js"></script>
</head>
<body>
<div class="container">
	<h3>Multiple File Upload with Dropzone.js and Laravel 6.2 MediaLibrary Package</h3>
    <div class="text-center" style="margin: 20px 0px 20px 0px;">
        <a href="https://beta.mynotepaper.com/" target="_blank" rel="noopener noreferrer"><img src="https://i.imgur.com/pakainfo_web.png"></a><br>
        <span class="text-secondary">PHP Laravel 6.2 Dropzone Multiple Image - www.pakainfo.com</span>
    </div>

    <form method="post" action="{{url('upload/store')}}" enctype="multipart/form-data"
          class="dropzone" id="dropzone">
        @csrf
    </form>
</div>

<script type="text/javascript">
    Dropzone.options.dropzone =
        {
            maxFilesize: 10,
            renameFile: function (file) {
                var dt = new Date();
                var time = dt.getTime();
                return time + file.name;
            },
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            addRemoveLinks: true,
            timeout: 352400,
            removedfile: function (file) {
                var name = file.upload.filename;
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    },
                    type: 'POST',
                    url: '{{ url("delete") }}',
                    data: {filename: name},
                    success: function (data) {
                        console.log("Good Luck, your File/Images has been successfully removed!!");
                    },
                    error: function (e) {
                        console.log(e);
                    }
                });
                var multiFileUpload;
                return (multiFileUpload = file.previewElement) != null ?
                    multiFileUpload.parentNode.removeChild(file.previewElement) : void 0;
            },

            success: function (file, response) {
                console.log(response);
            },
            error: function (file, response) {
                return false;
            }
        };
</script>

</body>
</html>

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about implement dropzone.js laravel 6.2.
I would like to have feedback on my infinityknow.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.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Laravel 5.8 Dropzone Multiple Image Upload
  2.   Simple Jquery Fancybox Popup
  3.   jquery form validation without plugin
  4.   Automatically Activate WordPress Plugins programmatically
  5.   Laravel 6 Remove public from URL
  6.   Append PHP HTML code using jQuery AJAX
  7.   How to Get Yii last inserted ID from database
  8.   Laravel Dropzonejs Multiple File Upload using jQuery
  9.   Laravel 6 select distinct and order by Example
  10.   Simple Directives using Angular Example