Laravel 9 Dropzone Multiple File Upload Example

  • 13-02-2023
  • 2052
  • Laravel 9
  • Haresh Chauhan
Watch Youtube Video (HINDI) :

In this tutorial we will integrate dropzone multiple file uploads in laravel, Dropzone is a popular open-source library for handling drag-and-drop file uploads in web applications. In the Laravel framework, you can use Dropzone to handle file uploads by integrating it with your application's HTML and JavaScript. Here's an example of how you can use Dropzone in Laravel.

just by drag and drop you can easy to upload files using dropzone laravel, we will add the dropzone js library from the site and we will add a post method form for dragging and dropping files on specific spaces to get upload files on the server.

Preview :

image

Step 1. Create Project

In this step, we will create a new fresh laravel project, if you already installed skip this step and move forward to the next step.

Use the below command and create a Laravel application on your server.

composer create-project laravel/laravel laravel

After successfully installing the new laravel app, we will config the database connection with the MYSQL database, goto the .env file, and add your database credential to get connection your application with the database.

.env 
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

Step 2. Create Controller

In this step, we will create a controller, use the below command in your command prompt and create an "ImageZoneController" just by entering the below provided command.

php artisan make:controller ImageZoneController

After that, we will create a migration and model the create an image table in the database to save the file name which we uploaded. use the below command in your app command prompt and create.

php artisan make:model Image -m

Just do give tow methods as below given in the controller in your app, the first method for the view blade file, and the second method for the upload file to the server just dropping in dropzone areas in the web page.

App\Http\Controllers\ImageZoneController.php 
<?php
 
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Models\Image; 
  
class ImageZoneController extends Controller
{
    public function show()
    { 
      return view('image');
    }
      
    public function upload(Request $request) 
    { 
      $image = $request->file('file');
      $name = $request->file('file')->getClientOriginalName();
      
      $image->move(public_path('images'),$name);
        
      $model = new Image();
      $model->image_name = $name;
      $model->save();

      return response()->json(['success'=>$name]);
    }
}

Step 3. Migration

Goto migration file, and paste up() method in your images migration file as below given.

database/migrations/2023_02_13_141119_create_images_table.php 
<?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->increments('id');
        $table->text('image_name');
        $table->timestamps();
      });
    }

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

After adding the field "image_name" in the migration file, we will migrate the database by entering the below command in the command prompt.

php artisan migrate

Step 4. Create a view file

Create an "image.blade.php" file in the below path, First, you need to include the Dropzone library in your project. You can either download it from the Dropzone website and include it in your project or use a package manager such as NPM to install it.

After that, create an HTML form that will be used to display the file upload interface. The form should contain a div element with an id, which will be used to initialize the Dropzone instance.

resources/views/image.blade.php 
<!DOCTYPE html>
<html>
<head>
    <title>Webappfix - Laravel 9 Multiple Upload Images using Dropzone drag and drop</title>
    <meta name="_token" content="{{csrf_token()}}" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.0/dropzone.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.2/dist/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.0/dropzone.js"></script>
</head>
<body>
<div class="container">
    <p><h1>Webappfix - Laravel 9 Multiple Upload Images using Dropzone drag and drop</h1></p>
    <form method="post" action="{{url('image/upload')}}" enctype="multipart/form-data" class="dropzone" id="dropzone">
        @csrf
    </form>   
<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: 5000,
    success: function(file, response) {
        console.log(response);
    },
    error: function(file, response){
        return false;
    }
};
</script>
</body>
</html>

Step 5. Define Routes

We will create two routes for the view blade file and a second route for the uploaded image to the server.

routes/web.php 
Route::get('image/show', [ImageZoneController::class, 'show']);
Route::post('image/upload', [ImageZoneController::class, 'upload']);

Step 6. Start Development Server

Use the below command and start your app development server.

php artisan serve

After starting the development server, copy the below URL and run it in your browser. you will see a dropzone, just drop some images in that and you will get to upload that image on the server.

http://127.0.0.1:8000/image/show

We always thanks to you for reading our blogs.

dharmesh-image

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

haresh-image

Haresh Chauhan

(Co-Founder)
We Are Also Recommending You :