Last active
October 16, 2022 05:32
-
-
Save sajed-zarrinpour/6e66dd410e0f5728f2b9cce1726c3148 to your computer and use it in GitHub Desktop.
Clean server side solution for summernote WYSIWYG editor image uploading
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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