How to Drag and Drop Image Upload in Laravel 10?

Mar 16, 2023 . Admin


Hi dev,

in this post, we will learn how to drag and drop image upload in laravel 10?. i’m going to show you about laravel 10 to drag. here you will learn dropzone.js in laravel 10. this article will give you simple example of dropzone.js step by step with laravel 10.

DropzoneJS is a popular and profound open-source library that allows you to drag ’n’ drop file uploads with image previews.

Let's see how to use Dropzone.js step by step with Laravel 10 to implement multiple file and image upload with progress bars and image previews.

Step 1: Download Laravel

Let us begin the tutorial by installing a new laravel application. if you have already created the project, then skip following step.

composer create-project laravel/laravel example-app
Step 2: Create Controller

In this point, now we should create a new controller as DropzoneController. In this controller, we will add two methods, one for return view response and another for store images.

php artisan make:controller DropzoneController

Let's update following code to your controller file:

app/Http/Controllers/DropzoneController.php
<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
 
class DropzoneController extends Controller
{
    /**
     * Generate Image upload View
     *
     * @return void
     */
    public function index()
    {
        return view('dropzone');
    }
      
    /**
     * Image Upload Code
     *
     * @return void
     */
    public function store(Request $request)
    {
        $image = $request->file('file');
     
        $imageName = time().'.'.$image->extension();
        $image->move(public_path('images'),$imageName);
     
        return response()->json(['success'=>$imageName]);
    }
}
Step 3: Create Routes

In this is step we need to create route for datatables layout file and another one for store images. so open your "routes/web.php" file and add following route.

routes/web.php
<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\DropzoneController;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
  
Route::controller(DropzoneController::class)->group(function(){
    Route::get('dropzone', 'index');
    Route::post('dropzone/store', 'store')->name('dropzone.store');
});
Step 4: Add Blade File

At last step we have to create dropzone.blade.php file in your resources directory. in this file i write code of image uploading using dropzone.js, so let's create new blade file and put bellow code:

resources/views/dropzone.blade.php
<!DOCTYPE html>
<html>
<head>
    <title>How to Drag and Drop Image Upload using Dropzone JS in Laravel 10? - Mywebtuts.com</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-12">

            <h3 class="text-center">How to Drag and Drop Image Upload using Dropzone JS in Laravel 10? - Mywebtuts.com</h3>
    
            <form action="{{ route('dropzone.store') }}" method="post" enctype="multipart/form-data" id="image-upload" class="dropzone">
                @csrf
                <div>
                    <h4>Upload Multiple Image By Click On Box</h4>
                </div>
            </form>
        </div>
    </div>
</div>
    
<script type="text/javascript">

    Dropzone.autoDiscover = false;

    var dropzone = new Dropzone('#image-upload', {
        thumbnailWidth: 200,
        maxFilesize: 1,
        acceptedFiles: ".jpeg,.jpg,.png,.gif"
    });

</script>
    
</body>
</html>
Run Laravel App:

All steps have been done, now you have to type the given command and hit enter to run the laravel app:

php artisan serve

Now, you have to open web browser, type the given URL and view the app output:

http://localhost:8000/dropzone
Output:

I hope it can help you...

#Laravel 10