0
1274

Laravel Summernote Image Upload

Myo Thant Kyaw

အားလုံးမင်္ဂလာပါ အခု ကျွန်တော် React Laravel Coruse လုပ်နေရင်း

Ecommerce Admin Panel Tutorial လုပ်နေတုန်းမှာ 

သင်နေရတာမလို့ tutorial လေးရေးချင်စိတ်ပေါက်လာတာနဲ့ ရေးလိုက်ရခြင်းပါ

:P


Summernote Rich Text Editor á€™á€¾á€¬ image ကို ရွေးလိုက်ရင် 

image  ကို base64 á€•á€¼á€±á€¬á€„်းပီး img tag မှာ ပြပေးပါတယ်

ဒီနည်းလမ်းနဲ့များ Database ထဲသိမ်းခဲ့ရင် database size ကတော်တော်လေးကြီးလာမှာဖြစ်ပီး

performace ကလည်းတော်တော်လေး weak လာမှာဖြစ်ပါတယ်

Server ကောင်းကောင်းဝယ်သုံးနိုင်သူတွေအတွက်တော့အကြုံးမဝင်ပါဘူး :P


အခုကျွန် တော်တို့ summernote က image ကို choose လိုက်ပီဆိုတာနဲ့

ပုံကို laravel ကို upload လုပ်ခိုင်းပါမယ်

laravel ကနေ image url ကို response လုပ်ပီး summernote မှာ ပုံကိုပြန်ပြပေးကြမယ်ပေါ့


အခု Tutorial အတွက် laravel version 9 (version 5 to 8 ထိသုံးနိုင်ပါတယ်။)

Bootstrap Version 4

Summernote Version 0.8

ကိုအသုံးပြုသွားပါမယ်။


အရင်ဆုံး  welcome.blade.php မှာ အောက်က html strucuterရေးပါ

Bootstrap နဲ့ summernote cdn link များကိုသတိပြုပါ

<textarea id='description'></textarea>

မှာ summernote ကို run မှာဖြစ်ပါတယ်။


<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Summernote Image Upload</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
</head>

<body>
<textarea id="description"></textarea>


<script src="https://code.jquery.com/jquery-3.6.0.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
<script>
//jquery code here
</script>
</body>

</html>

jquery Code Here comment မှာ code တချို့ဆက်ရေးသွားမှာဖြစ်ပါတယ်။

အောက်ကလို summernote() method ကိုခေါ်လိုက်တာနဲ့  summernote editor ထွက်လာမှာဖြစ်ပါတယ်။

//jquery code here
$('#description').summernote();


Laravel web.php မှာ  / route က welcome ကို render လုပ်ပါမယ်။

Route::get('/', function () {
return view('welcome');
});

browser မှာ run ကြည့်နိုင်ပါပီ။

Editor ထွက်လာတာကိုမြင်ရပါမယ်။


Summernote မှာ image choose လုပ်ပီးတဲ့ event တွေက 

callback ထဲမှာရှိနေပါတယ်။

အောက်က code မှာ console မှာ file[0] ကိုထုတ်ထားပီး 

js native image object á€‘ွက်လာမှာဖြစ်ပါတယ် ဒါကို laravel ကိုပို့ပေးရင်ရပါပီ။

$('#description').summernote({
callbacks:{
onImageUpload:function(file){
console.log(file[0]);
}
}
});


image upload လုပ်ဖို့ web.php မှာ 

/ route á€€á€­á€¯á€•á€² သွားလိုက်ပါမယ်။

laravel နဲ့ image ကို public directory ထဲထည့်ထားပီး

uploaded image path ကို return လုပ်ထားပေးပါမယ်။

Route::post('/', function () {
if (request()->has('image')) {
$file = request()->file('image');
$name = uniqid() . $file->getClientOriginalName();
$file->move(public_path('/images'), $name);
return asset('images/' . $name);
}
});

Image ကို ရွေးပီးတဲ့အခါမှာ upload လုပ်ဖို့အတွက် jquery and js code နည်းနည်းရေးပါမယ်။

welcome.blade.php က script tag မှာရေးရမှာဖြစ်ပါတယ်။

<script>
//jquery code here
$('#description').summernote({
callbacks:{
onImageUpload:function(file){
//laravel ကို form data ပို့ဖို့လိုအပ်ပါတ်။
// post method မှာ csrf secutiry အတွက် token ပါထည့်ပေးဖို့လိုအပ်ပါတယ်။
const frmData = new FormData();
frmData.append('_token',"@php echo csrf_token(); @endphp")
frmData.append('image',file[0]);
// ajax နဲ့ post method နဲ့လှမ်းခေါ်ပါမယ်။
$.ajax({
url:'/',
method:'POST',
contentType:false,
processData:false,
data:frmData,
success:function(data){
// uploaded ဖြစ်တဲ့အခါ data မှာ laravel က response လာတဲ့ image path ရလာမှာဖြစ်ပါတယ်။
$('#description').summernote('insertImage',data)
//summernote editor ထဲကို ပုံကိုထည့်လိုက်ပါမယ်။ doc မှာအသေးစိတ်ဖတ်နိုင်ပါတယ်။
}
})
}
}
});
</script>


ဒါဆိုရင််upload user က ပုံရွေးပီးတဲ့အခါမှာ ပုံက server မှာ upload လုပ်သွားမှာဖြစ်ပီး

editor ထဲမှာလည်း ပုံဝင်လာမှာဖြစ်ပါတယ်။

ဆက်ရေးချင်ရင် image upload လုပ်နေတုန်း  editor ကို disable လုပ်ထားသင့်ပီး 

upload အောင်မြင်သွားမှ enable ပြန်လုပ်ထားသင့်ပါတယ်။


အောက်လိုပြင်ရေးလိုက်ပါမယ်


<script>
//jquery code here
$('#description').summernote({
callbacks:{
onImageUpload:function(file){
//disable editor
$('#description').summernote('disable')
//laravel ကို form data ပို့ဖို့လိုအပ်ပါတ်။
// post method မှာ csrf secutiry အတွက် token ပါထည့်ပေးဖို့လိုအပ်ပါတယ်။
const frmData = new FormData();
frmData.append('_token',"@php echo csrf_token(); @endphp")
frmData.append('image',file[0]);

// ajax နဲ့ post method နဲ့လှမ်းခေါ်ပါမယ်။
$.ajax({
url:'/',
method:'POST',
contentType:false,
processData:false,
data:frmData,
success:function(data){
// uploaded ဖြစ်တဲ့အခါ data မှာ laravel က response လာတဲ့ image path ရလာမှာဖြစ်ပါတယ်။
$('#description').summernote('insertImage',data)
//summernote editor ထဲကို ပုံကိုထည့်လိုက်ပါမယ်။ doc မှာအသေးစိတ်ဖတ်နိုင်ပါတယ်။

//enable editor when image upload success
$('#description').summernote('enable')
}
})
}
}
});
</script>

ဒါဆိုရင်အားလုံးအဆင်ပြေသွားပါပီ။

See U Next Lessons Guyz!



Comment:
Please Login To Create Comment Login
Loading...