Laravel Dropzone Image Upload with Example
I this tutorial I will describe the Laravel dropzone Image upload with example. Laravel Multiple Images Uploading Using Dropzone.
Step 1 : Download Laravel Project
composer create-project --prefer-dist laravel/laravel dropzonefileuploadStep 2 : Setup a MySQL database
Setup database in the .env file.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=dropzone
DB_USERNAME=root
DB_PASSWORD=I have setup local database credentials.
Step 3 : Compose a model and migration file
php artisan make:model ImageUpload -mIt will create two files.
- ImageUpload.php model.
- create_image_uploads_table.php migration file.
#database/migrations/create_image_uploads_table.php
public function up() {
Schema::create('image_uploads', function (Blueprint $table) {
$table->increments('id');
$table->text('filename');
$table->timestamps();
});
}Step 4 : Create a view file
#resources/views/imagemultiupload.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Multiple Upload Images Using Dropzone</title>
<meta name="_token" content="{{csrf_token()}}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>
</head>
<body>
<div class="container">
<form method="post" action="{{url('upload/store')}}" enctype="multipart/form-data"
class="dropzone" id="dropzone">
@csrf
</form>
<script type="text/javascript">
Dropzone.options.dropzone =
{
maxFilesize: 12,
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>
maxFilesize: Dropzone only allows a size of less than 12MB. You can make it smaller or higher based on your requirements.
accepted files check the file’s mime type or extension against this list. We define .jpeg,.jpg,.png,.gif. You can change based on your needs.
addRemoveLinks: Dropzone will display the Remove button to remove our uploaded file.
Step 6 : Create one controller and route
php artisan make:controller MultiImageUploadControllerWe register route in routes/web.php file.
Route::get('image/upload','MultiImageUploadController@fileCreate');
Route::post('image/upload/store','MultiImageUploadController@fileStore');MultiImageUploadController.php
#app/Http/Controllers/MultiImageUploadController.php
use App\ImageUpload;
public function fileCreate() {
return view('imageupload');
}
public function fileStore(Request $request) {
$image = $request->file('file');
$imageName = $image->getClientOriginalName();
$image->move(public_path('images'),$imageName);
$imageUpload = new ImageUpload();
$imageUpload->filename = $imageName;
$imageUpload->save();
return response()->json(['success'=>$imageName]);
}
