Laravel Dropzone Image Upload Example

Published August 19th, 2023 17 min read

Hello fellow developers! Today, we'll explore how to implement a fantastic image upload feature using Dropzone.js in Laravel. Dropzone.js is a popular open-source library that provides a smooth and user-friendly way to handle file uploads, and we'll integrate it seamlessly into our Laravel application. Let's get started with this step-by-step example!

Step 1: Set Up a New Laravel Project 🛠️ Make sure you have Laravel installed on your system. If not, visit the official Laravel website and follow their installation guide to create a new project.

Step 2: Install Dropzone.js 🌀 In your Laravel project directory, use npm to install Dropzone.js:

npm install dropzone

Step 3: Create a Route and Controller 🌐 Next, create a route and controller to handle the image upload request. In your routes/web.php, add a route like this:

Route::post('/upload', 'ImageUploadController@upload')->name('upload');

Now, generate the controller using the following command:

php artisan make:controller ImageUploadController

In the ImageUploadController.php, define the upload method to handle the image upload logic:

public function upload(Request $request)
{
    $imagePath = $request->file('file')->store('uploads', 'public');
    return response()->json(['success' => $imagePath]);
}

Step 4: Set Up the Blade View 🎨 Create a new Blade view, for example, image-upload.blade.php, and add the necessary HTML and JavaScript to implement Dropzone.js. Here's a basic example:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Dropzone Image Upload Example</title>
    <!-- Include Dropzone.css -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h2>Image Upload using Dropzone.js</h2>
        <form action="{{ route('upload') }}" class="dropzone" id="imageUpload">
            @csrf
        </form>
    </div>

    <!-- Include Dropzone.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js"></script>
    <script>
        Dropzone.options.imageUpload = {
            maxFilesize: 2, // Maximum file size (in MB)
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            success: function (file, response) {
                alert('Image uploaded successfully!');
            },
            error: function (file, response) {
                alert('Something went wrong!');
            }
        };
    </script>
</body>
</html>

Step 5: Run Your Laravel Server 🚀 Now that everything is set up, run your Laravel development server using the following command:

php artisan serve

Visit your app in the browser at http://localhost:8000/image-upload, and you should see the Dropzone.js image upload form.

Voila! 🎉 You've successfully implemented a Laravel Dropzone Image Upload feature!