MM Coder-Laravel Summernote Image Upload

Web Development Laravel Javascript

Ajax

1296

Laravel Summernote Image Upload

Myo Thant Kyaw

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

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

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

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 များကိုသတိပြုပါ

မှာ 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

Zoom Meeting ဖြင့်သင်ကြားမည့်သင်တန်း Fullstack Web Development အတွက်သင်တန်းသားခေါ်ယူနေပါပီ။
2023-12-01 နေ့တွင်သင်တန်းစမှာဖြစ်ပါတယ်။

Languages

Laravel PHP NodeJS NPM Vue Javascript React

Ajax Mysql

Laravel Summernote Image Upload

Comment:

Categories

Languages