Laravel 7/6 multiple image upload using dropzone

Laravel 6 , Laravel , Laravel 7

Nicesnippets

1230

21-12-2019


Hii Guys,

In this tutorial, I will learn you how to multiple image upload using dropzone in laravel 7/6 .you can easy and simply to upload image using dropzone js in laravel 7/6.

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

step 1:- Setup Laravel Project

Bellow command used to you can install Laravel 7/6 project.

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

step 2:- configure this database in the .env file.

After you can configure your database in .env file and change the database name, username, password in the .env file.

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=Enter_Your_Database_Name(larave6_datatable)

DB_USERNAME=Enter_Your_Database_Username(root)

DB_PASSWORD=Enter_Your_Database_Password(root)

step 3:- Create Controller

you can create to controller in your project.This command is use to define in your terminal that create to controller,model and migration automatically.

php artisan make:controller ImageController -a

step 4:- Create Route

Add route in your route file.

routes/web.php

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

Route::post('/dropzone/store','ImageController@store')->name('dropzone.store');

step 5:- Add Method In Controller

Now, you can write this code in controller file.

app/Http/Controller/ImageController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Image;

class ImageController 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]);

}

}

step 6:- Create Route

Add route in your route file.

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

Route::post('/dropzone/store','ImageController@store')->name('dropzone.store');

step 7:- Create View File

Now, you will Create view file.

resources/views/image.blade.php

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Laravel 7/6 multiple image upload using dropzone - nicesnippets.com</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 multiple image upload using dropzone - nicesnippets.com</h2><br/>

<form method="post" action="{{ route('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>

It will help you....


Recommended Posts