How to Upload Image in Laravel 8.x Using Dropzone

Hello Artisan

In this example tutorial i am going discuss about dropzone. In this tutorial i will show you that how we can upload image in laravel using dropzone. You know that dropzone is the most popular, free and open-source library that provides drag and drop file uploads with image previews. It’s lightweight, doesn’t depend on any other library (like jQuery) and is highly customizable.

In this tutorial i will upload image uisng dropzone library, and you will see the image preview before upload it to the server. If you don't know how to do it, then you are a right place. I will show you step by step. 

You can upload image using many ways. But i think dropzone is best and most popular to use. Let's start ourLaravel 8 dropzone image upload example tutorial.

Read also : Laravel 7 Ajax Image Upload with Preview

Step 1 : Install Laravel 

Now download laravel 7 fresh project to do it step by step. You can attach it in your exixting project. So download it via below command.

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

Step 2: Create Model & Migration

In this step we have to create our model. Run below command to create ImageUpload model.

php artisan make:model ImageUpload -m

database/migrations/create__image_uploads_table

Schema::create('image_uploads', function (Blueprint $table) {
    $table->increments('id');
    $table->text('filename');
    $table->timestamps();
});

And then run migrate command to migrate our database table.

Step 3: Create Route

In this step we need to create our route for image upload with dropzone in laravel. 

routes/web.php

Route::get('image/upload','ImageUploadController@fileCreate');
Route::post('image/upload/store','ImageUploadController@fileStore');
Route::post('image/delete','ImageUploadController@fileDestroy');

Step 4: Create Controller

Now this time we need to create our image upload controller. Using this controller we will upload our image with dropzone. We will write our method here to upload image.

php artisan make:controller ImageUploadController

After running this command just paste below code to image upload controller.

app/Http/Controllers/ImageUploadController.php

namespace App\Http\Controllers;

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

class ImageUploadController extends Controller
{
    public function fileCreate()
    {
        return view('imageupload');
    }
    public function fileStore(Request $request)
    {
        $image = $request->file('file');
        $imageName = $image->getClientOriginalName();
        $image->move(public_path('images'),$imageName);
        
        $imageUpload = new ImageUpload();
        $imageUpload->filename = $imageName;
        $imageUpload->save();
        return response()->json(['success'=>$imageName]);
    }
    public function fileDestroy(Request $request)
    {
        $filename =  $request->get('filename');
        ImageUpload::where('filename',$filename)->delete();
        $path=public_path().'/images/'.$filename;
        if (file_exists($path)) {
            unlink($path);
        }
        return $filename;  
    }
}

Step 5: Create View

We are in the final step. Just we need to create our view to upload image in laravel with dropzone. Let's do it and paste this following code to your file.

resources/views/imageupload.blade.php

Read also : Laravel Vue Js Image Upload Using Image Intervention

Hope this tutorial can help you.