Skip to content

Instantly share code, notes, and snippets.

@franquis
Last active February 4, 2023 03:12
Show Gist options
  • Star 41 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save franquis/9ea58a173061c2f49f5a to your computer and use it in GitHub Desktop.
Save franquis/9ea58a173061c2f49f5a to your computer and use it in GitHub Desktop.
Summernote image upload with PHP (Laravel + Intervention\lmage)
@section('content')
{{Form::open('PostController@edit')}}
<input type="hidden" name="post_id" value="1">
<legend>Message</legend>
<textarea id="editor" name="message"></textarea>
<button type="submit">Save</button>
{{Form::close()}}
@stop
@section('scripts')
$('#editor').summernote();
@stop
<?php
/**
* This exemple shows how to parse base64 encoded images (submitted using Summernote), save them locally
* and replace the 'src' attribute in the submited HTML content
*
**/
use Intervention\Image\ImageManagerStatic as Image;
class PostController {
public function edit(){
$post = Post::findOrFail(Input::get('post_id')); // Post object exemple
$message = Input::get('message'); // Summernote input field
$dom = new DomDocument();
$dom->loadHtml($message, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$images = $dom->getElementsByTagName('img');
// foreach <img> in the submited message
foreach($images as $img){
$src = $img->getAttribute('src');
// if the img source is 'data-url'
if(preg_match('/data:image/', $src)){
// get the mimetype
preg_match('/data:image\/(?<mime>.*?)\;/', $src, $groups);
$mimetype = $groups['mime'];
// Generating a random filename
$filename = uniqid();
$filepath = "/images/$filename.$mimetype";
// @see http://image.intervention.io/api/
$image = Image::make($src)
// resize if required
/* ->resize(300, 200) */
->encode($mimetype, 100) // encode file to the specified mimetype
->save(public_path($filepath));
$new_src = asset($filepath);
$img->removeAttribute('src');
$img->setAttribute('src', $new_src);
} // <!--endif
} // <!--endforeach
$post->message = $dom->saveHTML();
$post->save();
Session::flash('message','Post updated!');
return Redirect::back();
}
}
@fang0099
Copy link

Hello, Is it ok to upload multiple big images at the same time? Have you tested that?

@fwartner
Copy link

How to fix the UTF Encoding? I have some ü,ä and ö in my content.. How do i sort them out to display them correctly?

@degt
Copy link

degt commented Oct 26, 2015

Nice!!..

Little fix. On line 34

$filepath = "/images/$filename . '.' . $mimetype";

@degt
Copy link

degt commented Oct 26, 2015

To fix UTF enconding:

Line 15

        $dom->loadHtml( mb_convert_encoding($message, 'HTML-ENTITIES', "UTF-8"), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);

@t0n1zz
Copy link

t0n1zz commented Jan 2, 2016

hmm how about when i delete the article? or when i edit the article and remove some image from there? how to remove that image? from image folder?

@AmrAbdalrahman
Copy link

This works good with me.

$message=$request->input('art_description');
$dom = new DomDocument();
$dom->loadHtml($message, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$images = $dom->getElementsByTagName('img');
// foreach in the submited message
foreach($images as $img){
$src = $img->getAttribute('src');

        // if the img source is 'data-url'
        if(preg_match('/data:image/', $src)){
            // get the mimetype
            preg_match('/data:image\/(?<mime>.*?)\;/', $src, $groups);
            $mimetype = $groups['mime'];
            // Generating a random filename
            $filename = uniqid();
            $filepath = "website/images/$filename.$mimetype";
            // @see http://image.intervention.io/api/
            $image = \Intervention\Image\Facades\Image::make($src)
                // resize if required
                /* ->resize(300, 200) */
                ->encode($mimetype, 100)  // encode file to the specified mimetype
                ->save(public_path($filepath));
            $new_src = asset($filepath);
            $img->removeAttribute('src');
            $img->setAttribute('src', $new_src);
        } // <!--endif
    } // <!-
    $exhib->art_description = $dom->saveHTML();

@somratcste
Copy link

somratcste commented Apr 4, 2017

It will be save image in base64 mode ,,,, but i have a solution to save image with a hyperlink of your image ,,,, i think u will get full solution with this link
http://www.somrat.info/summarnote-image-upload-with-laravel/

@rebootcode
Copy link

rebootcode commented Apr 15, 2017

@daanvissers
Copy link

Thank you for this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment