How to save and update image(s) from summernote with PHP vanilla or Laravel

How to save and update summernote images with PHP.

Summernote images are in base64 and therefore needs to be decoded, uploaded and then modify the image src data of the summnernote content with the directory of the image upload before saving the summernote content to DB. Cos its not recommended to save image info DB.

When I save the same path directory img/location of the uploaded image in the DB, summernote could not display the images when i try to edit the summernote content from DB <textarea>{{$dbData->content}}</textarea>

Also, you need to check if img src are really base64 image before decoding because when editing already saved contents, the existing img src wont be base64 image except the new ones yet to be uploaded since the existing img src has been already decoded and uploaded.

Solution

To avoid bad HTML formats throwing error, use LIBXML_NOWARNING | LIBXML_NOERROR
Also a simple way to detect base64 image in img src is by detecting data:image in the string. tho not optimal way but will solve without issues.
Finally, preceed forward slash "/" of the img src being modified in the summernote content will solve the issue of image not displaying in summer note content after fetching result from DB

If you have any recommendations and optimal ways, kindly comment and i will be glad. Thanks. Code (My Solution)

    //checking if request  is set
       if (isset($request->long_description)) {
        
        $detail=$request->long_description;
        
        //Prepare HTML & ignore HTML errors
        $dom = new \domdocument();
        $dom->loadHtml($detail, LIBXML_NOWARNING | LIBXML_NOERROR);

        //identify img element
        $images = $dom->getelementsbytagname('img');

         //loop over img elements, decode their base64 source data (src) and save them to folder,
        //and then replace base64 src with stored image URL.
        foreach($images as $k => $img){

            //collect img source data
            $data = $img->getattribute('src');

            //checking if img source data is image by detecting 'data:image' in string
            if (strpos($data, 'data:image')!==false){
            list($type, $data) = explode(';', $data);
            list(, $data)      = explode(',', $data);
            
            //decode base64
            $data = base64_decode($data);

            //naming image file
            $image_name= time().rand(000,999).$k.'.png';

            // image path (path) to use upload file to
            $path = 'img/location/'. $image_name;

            //image path (path2) to save to DB so that summernote can display image in edit mode (When editing summernote content) NB: the difference btwn path and path2 is the forward slash "/" in path2
            $path2 = '/img/location/'. $image_name;

            file_put_contents($path, $data);

            modify image source data in summernote content before upload to DB
            $img->removeattribute('src');
            $img->setattribute('src', $path2);
}

     else {
        // not base64 img

}
            
        }
        // final variable to store in DB
        $detail = $dom->savehtml();
       }