Skip to content

Instantly share code, notes, and snippets.

@arvindsvt

arvindsvt/dropzone-ckeditor-image-upload

Last active April 12, 2024 05:15
Show Gist options
  • Save arvindsvt/ae2420f2f57498d153bff9a12cd119ac to your computer and use it in GitHub Desktop.
Save arvindsvt/ae2420f2f57498d153bff9a12cd119ac to your computer and use it in GitHub Desktop.
Download ZIP
dropzone-ckeditor-image-upload
Raw
dropzone-ckeditor-image-upload
https://www.itsolutionstuff.com/post/laravel-6-ckeditor-image-upload-exampleexample.html
https://stackoverflow.com/questions/32810231/add-public-to-asset-path-in-laravel
//https://www.positronx.io/laravel-drag-and-drop-image-file-upload-tutorial-with-example/
Route::get('upload-ui', [FileUploadController::class, 'dropzoneUi' ]);
https://www.fundaofwebit.com/post/drag-and-drop-image-file-upload-in-laravel#google_vignette
https://dev.to/kingsconsult/how-to-upload-files-with-drag-n-drop-and-image-preview-in-laravel-8-using-dropzone-49hd
//https://phppot.com/javascript/dropzone-progress-bar/
Route::post('file-upload', [FileUploadController::class, 'dropzoneFileUpload' ])->name('dropzoneFileUpload');
Route::controller(DropzoneController::class)->group(function(){
//https://www.itsolutionstuff.com/post/laravel-9-drag-and-drop-file-upload-with-dropzone-jsexample.html
Route::get('dropzone', 'index');
Route::post('dropzone/store', 'store')->name('dropzone.store');
//https://github.com/phptechlife/laravel_10_ecomm_templates/blob/main/code-snippet-part-5.txt
Route::get('dropzone2', 'index2');
Route::post('dropzone/store2', 'create')->name('temp-images.create');
});
use App\Http\Controllers\FileUploadController;
use App\Http\Controllers\DropzoneController;
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class DropzoneController extends Controller
{
/**
* Generate Image upload View
*
* @return void
*/
public function index()
{
return view('dropzone');
}
/**
* Image Upload Code
*
* @return void
*/
public function store(Request $request)
{
$image = $request->file('file');
$imageName = time().'.'.$image->extension();
$image->move(public_path('images'),$imageName);
return response()->json(['success'=>$imageName]);
}
public function index2(){
return view('dropzone2');
}
public function store2(Request $request){
$image = $request->file('image');
$imageName = time().'.'.$image->extension();
$image->move(public_path('images'),$imageName);
return response()->json([
'success'=> 200 ,
'imagename'=> public_path('images').$imageName
]);
}
public function create (Request $request){
$image = $request->image;
if (!empty($image)){
$ext = $image->getClientOriginalExtension();
$newName = time().'.'. $ext;
// $tempImage = new TempImage();
// $tempImage->name = $newName;
// $tempImage->save();
$image->move(public_path() , '/temp' , $newName);
return response()->json([
'status' => true ,
//'image_id' => $tempImage-›id,
'image_path' => public_path('/temp/') . $newName,
'message' => 'Image uploaded successfully'
]);
}
}
}
_______________________________________________
<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 Drag and Drop File Upload with Dropzone JS - ItSolutionStuff.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Laravel 9 Drag and Drop File Upload with Dropzone JS - ItSolutionStuff.com</h1>
<form action="{{ route('dropzone.store') }}" method="post" enctype="multipart/form-data" id="image-upload" class="dropzone">
@csrf
<div>
<h4>Upload Multiple Image By Click On Box</h4>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
Dropzone.autoDiscover = false;
var dropzone = new Dropzone('#image-upload', {
thumbnailWidth: 200,
maxFilesize: 1,
acceptedFiles: ".jpeg,.jpg,.png,.gif",
success: function(file, response){
$("#image_id").val(response.imagename);
console.log(response)
}
});
</script>
</body>
</html>
________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<title>Laravel 8|7 Drag And Drop File/Image Upload Examle </title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js"></script>
<script>
var dropzone = new Dropzone('#file-upload',
{
previewTemplate: document.querySelector('#preview-template').innerHTML,
parallelUploads: 3,
thumbnailHeight: 150,
thumbnailWidth: 150,
maxFilesize: 5,
filesizeBase: 1500,
thumbnail: function (file, dataUrl) {
if (file.previewElement) {
file.previewElement.classList.remove("dz-file-preview");
var images = file.previewElement.querySelectorAll("[data-dz-thumbnail]");
for (var i = 0; i < images.length; i++) {
var thumbnailElement = images[i];
thumbnailElement.alt = file.name;
thumbnailElement.src = dataUrl;
}
setTimeout(function () {
file.previewElement.classList.add("dz-image-preview");
}, 1);
}
},
success: function(file, response){
$("#image_id").val(response.imagename);
console.log(response)
}
});
var minSteps = 6,
maxSteps = 60,
timeBetweenSteps = 100,
bytesPerStep = 100000;
dropzone.uploadFiles = function (files) {
var self = this;
for (var i = 0; i < files.length; i++) {
var file = files[i];
totalSteps = Math.round(Math.min(maxSteps, Math.max(minSteps, file.size / bytesPerStep)));
for (var step = 0; step < totalSteps; step++) {
var duration = timeBetweenSteps * (step + 1);
setTimeout(function (file, totalSteps, step) {
return function () {
file.upload = {
progress: 100 * (step + 1) / totalSteps,
total: file.size,
bytesSent: (step + 1) * file.size / totalSteps
};
self.emit('uploadprogress', file, file.upload.progress, file.upload
.bytesSent);
if (file.upload.progress == 100) {
file.status = Dropzone.SUCCESS;
self.emit("success", file, 'success', null);
self.emit("complete", file);
self.processQueue();
}
};
}(file, totalSteps, step), duration);
}
}
}
</script>
<style>
.dropzone {
background: #e3e6ff;
border-radius: 13px;
max-width: 550px;
margin-left: auto;
margin-right: auto;
border: 2px dotted #1833FF;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="dropzone">
<form action="{{ route('dropzoneFileUpload') }}" class="dropzone" id="file-upload" enctype="multipart/form-data">
@csrf
<div class="dz-message">
Drag and Drop Single/Multiple Files Here<br>
</div>
</form>
</div>
</body>
</html>
________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 Drag and Drop File Upload with Dropzone JS - ItSolutionStuff.com</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<meta name="csrf_token" content="{{ csrf_token() }}" />
</head>
<body>
{{ route('temp-images.create') }}
<div id="image" class="dropzone dz-clickable">
<div class="dz-message needsclick">
<br>Drop files here or click to upload.<br><br>
</div>
</div>
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>@if (isset($product)) Edit @else Add @endif Product</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('products.index') }}"> Back</a>
</div>
</div>
</div>
@if ($errors->any())
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
@if (isset($product))
<form action="{{ route('products.update', $product->id) }}" method="POST" enctype="multipart/form-data">
@method('PUT')
@else
<form action="{{ route('products.store') }}" method="POST" enctype="multipart/form-data">
@endif
@csrf
<input type="text" name="image_id" id="image_id" value="{{ old('image_id', $product->image_id ?? '') }}" class="form-control" placeholder="image_id">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Name:</strong>
<input type="text" name="name" value="{{ old('name', $product->name ?? '') }}" class="form-control" placeholder="Name">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Detail:</strong>
<textarea class="form-control" style="height:150px" name="detail" placeholder="Detail">{{ old('detail', $product->detail ?? '') }}</textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
<script type="text/javascript">
Dropzone.autoDiscover = false;
// const dropzone = $("#image").dropzone( ,
var dropzone = new Dropzone('#image',
{ init: function() {
this.on('addedfile', function(file) {
if (this.files.length > 1) {
this.removeFile(this.files[0]);
}
});
},
url: "{{ route('temp-images.create') }}",
maxFiles: 1,
paramName: 'image',
addRemoveLinks: true,
acceptedFiles: "image/jpeg,image/png,image/gif",
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
},
success: function(file, response){
$("#image_id").val(response.imagename);
console.log(response)
}
});
</script>
</body>
</html>
________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 Drag and Drop File Upload with Dropzone JS - ItSolutionStuff.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Laravel 9 Drag and Drop File Upload with Dropzone JS - ItSolutionStuff.com</h1>
<form action="{{ route('dropzone.store') }}" method="post" enctype="multipart/form-data" id="image-upload" class="dropzone">
@csrf
<div>
<h4>Upload Multiple Image By Click On Box</h4>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
Dropzone.autoDiscover = false;
var dropzone = new Dropzone('#image-upload', {
thumbnailWidth: 200,
maxFilesize: 1,
acceptedFiles: ".jpeg,.jpg,.png,.gif",
success: function(file, response){
$("#image_id").val(response.imagename);
console.log(response)
}
});
</script>
</body>
</html>
+++++++++++++++++++++++++++++++++
https://www.itsolutionstuff.com/post/laravel-5-ckeditor-image-upload-exampleexample.html
https://techvblogs.com/blog/multiple-authentication-guards-laravel-9
https://webjourney.dev/how-to-implements-multiple-authentication-for-a-website-using-laravel-10-with-guards
https://www.positronx.io/how-to-install-integrate-ckeditor-in-laravel/
add real url $assetURL = 'http://localhost/mar24/ecommLara11/';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment