Hello,
Quill editor doing really great job with accepting images and putting it as base64.
But actually it doesnt good, especially for big images.
Your DB will be big AF and page load time will grow with each image in text.
I didnt find good or working solution from Quill side. Only some closed GitHub issues.
So i decided to make lilttle hack on backend.
My system info: ,
Now what we need.
Firstly install
|
1 |
composer require symfony/dom-crawler |
Then include it and some other classes in your model/controller.
|
1 2 3 |
use Symfony\Component\DomCrawler\Crawler; use Illuminate\Support\Facades\Storage; use Illuminate\Http\File; |
And here code of extractor/file saver
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$desc = $request->input('some_html'); // POST with html $dom_desc = new Crawler($desc); $images = $dom_desc->filterXPath('//img')->extract(array('src')); // extract images foreach ($images as $key => $value) { if (strpos($value, 'base64') !== false) { // leave alone not base64 images $data = explode(',', $value); // split image mime and body $tmp_file = tempnam('/tmp', 'items'); // create tmp file path file_put_contents($tmp_file, base64_decode($data[1])); // fill temp file with image $path = Storage::putFile('public/items', new File($tmp_file)); // put file to final destination $desc = str_replace($value, $path, $desc); // replace src of converted file to fs path unlink($tmp_file); // delete temp file } } |
And finally we got $desc html with converted base64 -> fs path
Saving to DB.
That’s all.
Full Code at gist: