Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sajed-zarrinpour/6e66dd410e0f5728f2b9cce1726c3148 to your computer and use it in GitHub Desktop.
Save sajed-zarrinpour/6e66dd410e0f5728f2b9cce1726c3148 to your computer and use it in GitHub Desktop.
Clean server side solution for summernote WYSIWYG editor image uploading
<?php
/*
* Based on this blog post: https://www.codewall.co.uk/install-summernote-with-laravel-tutorial/
* here is my solution for the summernote editor image upload.
* Notes :
***** Do not forget enctype="multipart/form-data" attribute in your form ;)
***** Use unscaped blade syntax {!! $data !!} to render the results
***** Make sure you read laravel 5.8 Storage Documentation here : https://laravel.com/docs/5.8/filesystem#the-public-disk
***** For Simplicity I used clusures, means that this is originally **routes/web.php** file!
***** UTF-8 is supported according to this: https://gist.github.com/Xeoncross/9401853#gistcomment-1300643
*/
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
Route::get('/your-route-to-editor', function () {
return view('your-view');
});
Route::post('/your-route-to-processor', function (Request $request) {
$this->validate($request, [
'editordata' => 'required',
]);
$data = $request->input('editordata');
//loading the html data from the summernote editor and select the img tags from it
$dom = new DOMDocument('1.0', 'UTF-8');
$dom->loadHtml(mb_convert_encoding($data, 'HTML-ENTITIES', 'UTF-8'), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$images = $dom->getElementsByTagName('img');
foreach($images as $k => $img){
//for now src attribute contains image encrypted data in a nonsence string
$data = $img->getAttribute('src');
//getting the original file name that is in data-filename attribute of img
$file_name = $img->getAttribute('data-filename');
//extracting the original file name and extension
$arr = explode('.', $file_name);
$upload_base_directory = 'public/';
$original_file_name='time()'.$k;
$original_file_extension='png';
if (sizeof($arr) == 2) {
$original_file_name = $arr[0];
$original_file_extension = $arr[1];
//file name validations?
}
else
{
//the file name contains extra . in itself
$original_file_name = implode("_",array_slice($arr,0,sizeof($arr)-1));
$original_file_extension = $arr[sizeof($arr)-1];
}
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
$path = $upload_base_directory.$original_file_name.'.'.$original_file_extension;
//uploading the image to an actual file on the server and get the url to it to update the src attribute of images
Storage::put($path, $data);
$img->removeAttribute('src');
//you can remove the data-filename attribute here too if you want.
$img->setAttribute('src', Storage::url($path));
// data base stuff here :
//saving the attachments path in an array
}
//updating the summernote WYSIWYG markdown output.
$data = $dom->saveHTML($doc->documentElement);
// data base stuff here :
// save the post along with it attachments array
return view('your-preview-page')->with(['data'=>$data]);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment