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]);
}
}
Recommended Post
Laravel 6 Upload image on Amazon S3 CloudStep 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
Recommended Posts:
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
- Upload Files/Images to Amazon s3 Cloud Using Laravel 6 Filesystem
- Laravel 7 CKEditor with Image Upload
- Laravel 7 Ajax Image Upload Tutorial Example From Scratch
- Intervention Upload Image Using Ajax in laravel – Example
- Laravel 6 Upload Image to Database with Validation
- Upload Validation Laravel 6 File Example Tutorial
- Laravel 6 Multiple File Upload With Validation Example
