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

Laravel 5.8 Dropzone Multiple Image Upload

Today, We want to share with you Laravel 5.8 Dropzone Multiple Image Upload.In this post we will show you Laravel 5.8 Multiple Image Upload with DropzoneJS, hear for PHP Laravel 5.8 Multiple Images Uploading using dropzone.js example with demo we will give you demo and example for implement.In this post, we will learn about Laravel 5.8 multiple images uploading using dropzone js with an example.

Laravel 5.8 Dropzone Multiple Image Upload

There are the Following The simple About Laravel 5.8 Dropzone Multiple Image Upload Full Information With Example and source code.

  How to Open URL in New Tab using EmberJS

As I will cover this Post with live Working example to develop Laravel Dropzone Image Upload Tutorial With Example, so the laravel multiple image upload for this example is following below.

Step 1 : Install Laravel 5.8 & Config

    composer create-project --prefer-dist laravel/laravel image_uploads

Please Step By Step Laravel 5.8 Install this part from here Laravel 5.8 CRUD Example Tutorial For Beginners From Scratch

Step 2 : Make a MySQL Table

table Name : image_uploads

php artisan make:migration create_image_uploads_table --create=image_uploads

Path : database/migrations

250619_143919_create_image_uploads_table.php

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateImageUploadsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('image_uploads', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->text('multipleflname');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('image_uploads');
    }
}

run Simple Commands to Store Database Migrations in MySQL

php artisan migrate

Step 3 : Make a Laravel 5.8 Model and Controller

Laravel 5.8 Create Model and Controller using CLI

php artisan make:controller multipleUploadController --model=ImageUpload

App/Http/Controllers/multipleUploadController.php

<?php

namespace App\Http\Controllers;

use App\ImageUpload;
use Illuminate\Http\Request;

class multipleUploadController extends Controller
{
    public function upload()
    {
        return view('image_upload');
    }

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

        $imageUpload = new ImageUpload();
        $imageUpload->multipleflname = $imgFlName;
        $imageUpload->save();
        return response()->json(['success' => $imgFlName]);
    }

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

Step 4 : Define a Laravel 5.8 Routes

routes/web.php

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

Step 5 : Create Laravel 5.8 Blade File

resources/views/image_upload.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Laravel Multiple Image Upload in DropzoneJS - Laravel 5.8</title>
    <meta name="_token" content="{{csrf_token()}}"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/min/dropzone.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/dropzone.js"></script>
</head>
<body>
<div class="container">

    <h3 class="text-center" style="margin-top: 50px;">Pakainfo.com - Laravel 5.8 Multiple Image Upload Using DropzoneJS</h3><br>
    <form method="post" action="{{url('upload/store')}}" enctype="multipart/form-data"
          class="dropzone" id="dropzone">
        @csrf
    </form>
    <script type="text/javascript">
        Dropzone.options.dropzone =
            {
                maxFilesize: 12,
                renameFile: function (file) {
                    var dt = new Date();
                    var time = dt.getTime();
                    return time + file.name;
                },
                acceptedFiles: ".jpeg,.jpg,.png,.gif",
                addRemoveLinks: true,
                timeout: 50000,
                removedfile: function (file) {
                    var name = file.upload.multipleflname;
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                        },
                        type: 'POST',
                        url: '{{ url("delete") }}',
                        data: {multipleflname: name},
                        success: function (data) {
                            console.log("Good Luck, File has been successfully removed!!");
                        },
                        error: function (e) {
                            console.log(e);
                        }
                    });
                    var fileRef;
                    return (fileRef = file.previewElement) != null ?
                        fileRef.parentNode.removeChild(file.previewElement) : void 0;
                },

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

Angular 6 CRUD Operations Application Tutorials

Read :

  Angular 5 NgSwitch Example Tutorials

Summary

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

I hope you get an idea about Laravel 5.8 Dropzone Multiple Image Upload.
I would like to have feedback on my Pakainfo.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.

Leave a Reply

avatar
  Subscribe  
Notify of