Dropzone Image Upload Tutorial In Laravel 6/7

Websolutionstuff | Sep-21-2020 | Categories : Laravel PHP jQuery

In this article, we will see dropzone image upload in laravel 6/7. To upload images and files we will use dropzone.js. DropzoneJS is an open-source library that provides drag-and-drop file uploads with image previews. Here, we will upload multiple images using dropzone in laravel 6/7/8. So we will see a dropzone file upload in laravel on 6/7/8.

So, let's see laravel image upload in laravel using dropzone, dropzone multiple image upload laravel, laravel drag and drop file upload, and multiple file upload in laravel 6/7.

Dropzone is a javascript jquery plugin, using dropzone.js we can select one by one image with a preview. After choosing an image from browse we can see a preview of the image. dropzone.js also provides a filter like make validation for max upload, a specific image or file extension, etc.

Laravel 6/7 Image Upload Using Dropzone

I have added a few steps for drag and drop image files in laravel.

Step 1: Add Route

In this step, we will add routes in the web.php file.

routes/web.php

Route::get('dropzone/example', 'UserController@dropzoneExample');
Route::post('dropzone/store', 'UserController@dropzoneStore')->name('dropzone.store');

 

 

Step 2: Create Controller

In this step, we will create a controller and add a piece of code.

Note: Create a new images folder in the public folder to save images.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;

class UserController extends Controller
{

    public function dropzoneExample()
    {
        return view('dropzone_view');
    }

    public function dropzoneStore(Request $request)
    {
        $image = $request->file('file');

        $imageName = time().'.'.$image->extension();
        $image->move(public_path('images'),$imageName);
   
        return response()->json(['success'=>$imageName]);
    }
}

 

Step 3: Add Blade File For View

 Now, we will create a blade file for viewing.

resources/views/dropzone_view.blade.php

<html>
<head>
    <title>Dropzone Image Upload Example in Laravel - websolutionstuff.com</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>  
    <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1 class="text-center">Dropzone Image Upload Example in Laravel - websolutionstuff.com</h1><br>
            <form action="{{route('dropzone.store')}}" method="post" name="file" files="true" enctype="multipart/form-data" class="dropzone" id="image-upload">
                @csrf
                <div>
                <h3 class="text-center">Upload Multiple Images</h3>
            </div>    
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
        Dropzone.options.imageUpload = {
            maxFilesize: 1,
            acceptedFiles: ".jpeg,.jpg,.png,.gif"
        };
</script>
</body>
</html>

 

 

Output:

dropzone_image_upload_example_in_laravel

 


You might also like:

Recommended Post
Featured Post
How To Get Current Date And Time In React JS
How To Get Current Date And Ti...

In this article, we will see how to get the current date and time in react js. You can get the current date and tim...

Read More

Sep-02-2022

How To Remove index.php From URL In Laravel 9
How To Remove index.php From U...

If you're a developer, you're likely to have frustration with "index.php" cluttering up your website&#...

Read More

Jan-13-2023

How To Get Last 15 Days Records In MySQL
How To Get Last 15 Days Record...

In this tutorial, we will see how to get the last 15 days records in MySQL PHP.  In PHP, you can use INTERVAL...

Read More

Feb-09-2022

How To Restrict User Access From IP Address In Laravel 9
How To Restrict User Access Fr...

Imagine this: You've made a super cool website, and now you want to make sure only the right people can use it. That...

Read More

Jan-03-2023