Laravel 7/6 Dropzone Upload Image Tutorial

Laravel 7/6 Dropzone Upload Image Tutorial

Laravel 7 and 6 upload images and files using the dropzone js tutorial. In this tutorial, you will learn how to upload single, multiple images in Laravel using dropzone js.

Laravel Upload Image Using Dropzone js Tutorial

Follow following steps and upload images using dropzone js in laravel:

  • Install Laravel App
  • Setup Database Credentials in .env
  • Create Route
  • Generate a Controller & Model
  • Create a View File
  • Start Development Server

1). Install Laravel App

First of all, we need to install the laravel fresh application. Use the below command and download fresh new laravel setup :

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

2). Setup Database Credentials in .env

In this step, go to your project directory and open .env file and set your database credentials like this:


3). Create Route

Next, we need to create two routes first is showing our blade view and the second one is store images into the database. So you can copy the below routes and go to routes/web.php and update the below routes there:


4). Generate a Controller & Model

In this step, we will create one controller and one model using the below-given command. So open your terminal and type the below command


Then run the below command on command prompt:

php artisan make:model Image -mcr

The above command will create one model name image model and also will create one controller name ImageController.php.

Next Open ImageController.php and put the below methods into your controller file:


namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Image;

class HomeController extends Controller

    public function index()
        return view('image');

    public function store(Request $request)
        $image = $request->file('file');
        $avatarName = $image->getClientOriginalName();
        $imageUpload = new Image();
        $imageUpload->filename = $avatarName;
        return response()->json(['success'=>$avatarName]);


5). Create Blade view

In this step, we need to create a blade view file. Go to app/resources/views and create one file name image.blade.php:

<!DOCTYPE html>
    <meta charset="utf-8">
    <title>Laravel Upload Image Using Dropzone Tutorial</title>
    <link rel="stylesheet" href="{{asset('css/app.css')}}">

    <link rel="stylesheet" href=""> 
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <link rel="stylesheet" href="">
    <script src=""></script>
    <div class="container">
      <h2>Laravel 6 Upload Image Using Dropzone Tutorial</h2><br/>
      <form method="post" action="{{url('dropzone/store')}}" enctype="multipart/form-data"
          class="dropzone" id="dropzone">
    <script type="text/javascript">
        Dropzone.options.dropzone =
            maxFilesize: 10,
            renameFile: function (file) {
                var dt = new Date();
                var time = dt.getTime();
                return time +;
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            addRemoveLinks: true,
            timeout: 60000,
            success: function (file, response) {
            error: function (file, response) {
                return false;

In the above view blade file, we necessary to include dropzone js and CSS. Here we are going to use CDN js and CSS of dropzone in laravel.

 <link rel="stylesheet" href="">
    <script src=""></script>

6). Start Development Server

We need to start the development server. Use the PHP artisan serve command and start your server :

 php artisan serve
If you want to run the project diffrent port so use this below command
php artisan serve --port=8080

Now we are ready to run our example so run bellow command to quick run.

Recommended Posts:

Laravel Tutorial From Scratch

 Or direct hit in your browser

If you want to remove public or public/index.php from URL In laravel, Click Me

You may like

  1. Upload Files/Images to Amazon s3 Cloud Using Laravel 6 Filesystem
  2. Laravel 6 CKEditor with Image Upload
  3. Laravel 6 Ajax Image Upload Tutorial Example From Scratch
  4. Intervention Upload Image Using Ajax in laravel – Example
  5. Laravel 6 Upload Image to Database with Validation
  6. Upload Validation Laravel 6 File Example Tutorial
  7. Laravel 6 Multiple File Upload With Validation Example
Finally, the dropzone blade view looks like:
laravel upload image dropzone
laravel upload image dropzone


In this tutorial, We have successfully uploaded images using dropzone js in laravel.

If you have any questions or thoughts to share, use the comment form below to reach us.

AuthorTuts Make

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Javascript, JQuery, Laravel, Codeigniter, Vue JS, Angular JS, React Js, WordPress and Bootstrap from a starting stage.

Leave a Reply

Your email address will not be published. Required fields are marked *