Laravel 7/6 Dropzone -Upload Multiple File

Laravel 7/6 upload multiple file image using dropzone js. In this tutorial, you will learn how to upload multiple image file in laravel using dropzone js.

When you use dropzone js for multiple image upload in laravel. At that time, the dropzone js box shows a preview of each image.

This laravel dropzone js tutorial will guide you on how to upload single or multiple image file in laravel app. And display preview of image file using on drop box.

Note that, you will not have to write a separate code to show the preview of the image in laravel app with dropzone js. Dropzone js will automatically show a preview of the image file.

And also, you can drag and drop multiple image file into drop box with drozone in laravel.

Laravel Upload Multiple Files Using Dropzone js Tutorial

Follow the simple and easy steps to upload multiple file image 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

Step 1: Install Laravel App

First of all, you need to install the laravel fresh application. So run the following command to create laravel dropzone image upload project:

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

Step 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:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=databasename
DB_USERNAME=db_username
DB_PASSWORD=db_password

Step 3: Create Route

In this step, you need to create two routes for upload image using dropzone in laravel.

So navigate to routes folder and open web.php. Then update the following routes into web.php file:

Route::get('dropzone/image','ImageController@index');
Route::post('dropzone/store','ImageController@store');

Step 4: Generate a Controller & Model

In this step, you need create one controller and one model using the below-given command. So open your terminal and run following command:

cd/project_name

Then run the below command on command prompt:

php artisan make:model Image -mcr

The above command will create one model name Image model, migration file for Image Table and also will create one controller name ImageController.php.

Now, navigate to database/migrations directory and open create_images_table.php file and add the following code in create_images_table.php file:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateImagesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('images', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('images');
    }
}

Now, open your terminal and run the php artisan migrate command to create image table into your database:

php artisan migrate

Next, Navigate to app/http/controllers direcotry and open ImageController.php. Then update the following methods into your ImageController.php file:

<?php

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();
        $image->move(public_path('images'),$avatarName);
        
        $imageUpload = new Image();
        $imageUpload->title = $avatarName;
        $imageUpload->save();
        return response()->json(['success'=>$avatarName]);
    }

}

Step 5: Create Blade view

In this step, you need to create a blade view file. So navigate to /resources/views folder and create one file name image.blade.php.

After that, add the following code into your image.blade.php file:

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

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/min/dropzone.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/dropzone.js"></script>
  </head>
  <body>
    <div class="container">
      <h2>Laravel 7/6 Upload Image Using Dropzone Tutorial</h2><br/>
      <form method="post" action="{{url('dropzone/store')}}" enctype="multipart/form-data"
          class="dropzone" id="dropzone">
        @csrf
    </form>
    </div>
    <script type="text/javascript">
        Dropzone.options.dropzone =
        {
            maxFilesize: 10,
            renameFile: function (file) {
                var dt = new Date();
                var time = dt.getTime();
                return time + file.name;
            },
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            addRemoveLinks: true,
            timeout: 60000,
            success: function (file, response) {
                console.log(response);
            },
            error: function (file, response) {
                return false;
            }
        };
    </script>
  </body>
</html>

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="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/min/dropzone.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/dropzone.js"></script>

Step 6: Start Development Server

Finally, you need to start the development server. So run the following PHP artisan serve command to start your web server:

 php artisan serve

 If you want to run the project diffrent port so use this below command 

 php artisan serve --port=8080  

Now you are ready for this laravel dropzone image upload example. So open your browser and hit the following urls on it:

 http://localhost:8000/image

 Or direct hit in your browser

 http://localhost/laravelDropzone/public/image 

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

Finally, the laravel dropzone multiple image file upload project looks like:

Conclusion

In this tutorial, you have learned how to upload multiple images using dropzone with preview in laravel.

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

Recommended Laravel Posts

1. Upload Files/Images to Amazon s3 Cloud Using Laravel 6 Filesystem
2. Laravel 7 CKEditor with Image Upload
3. Laravel 7 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