Laravel 6 Upload Image Using Dropzone js Tutorial

Laravel 6 Upload Image Using Dropzone js Tutorial

Laravel 6 upload image using dropzone js tutorial. In this tutorial, we would love to share with you how you can use the dropzone js to upload single or multiple images in Laravel.

This tutorial shows you things step by step for uploading the images using dropzone in laravel.

Laravel 6 Upload Image Using Dropzone js Tutorial With Example

Follow these few steps and upload image using dropzone 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:

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

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:

Route::get('dropzone/image','[email protected]');
Route::post('dropzone/store','[email protected]');

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

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 and also will create one controller name ImageController.php.

Next Open ImageController.php and put the below methods into your controller 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->filename = $avatarName;
        $imageUpload->save();
        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>
<html>
  <head>
    <meta charset="utf-8">
    <title>Laravel 6 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 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>

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

 http://localhost:8000/image
 Or direct hit in your browser
 http://localhost/laravelDropzone/public/image

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

Conclusion

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.

Leave a Reply

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