Upload Gambar dengan Summernote pada Laravel

Kebutuhan awal sederhana adalah ketika kita membuat artikel seperti pada wordpress ini. Kita ingin data gambar setelah diupload itu muncul juga dan tersimpan pada folder tertentu. Nah Summernote ini bisa melakukannya dibantu laravel untuk proses upload dan convert karena data dari summernote itu bentuknya base64 dan dataUri.

Dibagian html cukup panggil aja element lalu summernotenya. Tapi ketika proses ke laravel kita lakukan trik convert menjadi gambar seperti diupload. Kenyataannya adalah, kita create gambar dengan Intervention, lalu kita convert tag html summernote menjadi tag img html biasa.

Berikut adalah kodenya:

public function store(Request $request) {       
        $page_repository = new PageRepository;
        
        $this->validate($request, [
            'title' => 'required'
        ]);

        $content = $request->content; // ambil dari form blade
        
        $dom = new \DomDocument(); // gunakan dom document untuk ngambil tag img summernote
        $dom->loadHtml( mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8"), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
        $images = $dom->getElementsByTagName('img'); // ambil aja semua yg tag img
        foreach($images as $img){
            $src = $img->getAttribute('src'); // ambil src dari img
            if(preg_match('/data:image/', $src)){ // check data apa bentuknya data:image
                // get the mimetype
                preg_match('/data:image\/(?<mime>.*?)\;/', $src, $groups); // pecah-pecah data
                $mimetype = $groups['mime'];
                
                $filename = uniqid(); // buat nama file upload
                $filepath = "/uploads/page/$filename.$mimetype"; // path folder gambar
                // disini buat gambar lalu simpan pada folder yang diinginkan
                $image = Image::make($src)
                  ->encode($mimetype, 100)  // encode file to the specified mimetype
                  ->save(public_path($filepath));
                
                $new_src = asset($filepath); // convert menjadi tag img html biasa
                $img->removeAttribute('src'); // hapus tag img bawaan si summernote
                $img->setAttribute('src', $new_src); // ganti dengan yang baru.
            }
        }

        $data_saved = array(
            "title" => $request->title,
            "filter" => $request->filter,
            "slug" => str_slug($request->title),
            "content" => $dom->saveHTML(),// proses simpan data yang baru disini.
            "position" => $request->position
        );

        $id = $page_repository->save_data($data_saved);

        if($id > 0) { // success
            return redirect('page');
        } else { // fail save
            return redirect('page/create')->withErrors('Any error occurs');
        }
    }

Penjelasan kode saya sisipkan juga ya biar enak langsung di kode.

Sebenarnya proses ini bisa dihandel lagi dengan menambahkan table artikel image, jadi ketika looping collect data image itu kita insert aja ke table artikel image. Hal ini dilakukan untuk menghapus gambar yang numpuk di folder gambar jika terjadi proses edit gambar pada artikel.

Selamat mencoba 🙂

Sumber acuan: https://gist.github.com/franquis/9ea58a173061c2f49f5a

2 comments

  1. bang ini kan buat nyimpen gambarnya ke directory web kita ya, kalo untuk nampilin gambar yang udh ada biar bisa dipilih trus muncul di editor summernotenya gmn bang?
    makasih bang

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: