 |
| upload image with texteditior |
Almost every one who start learning any thing in web starts with creating a blogging web site in what ever technology or framework he starts to learn.
When we create blog site for learning we just consider the text, but real problem happens when we are building the real blogging site because now we have to consider the images also.
Most of the WYSIWYG editors ( Summernote which is my favourite ) provides the facility to upload the image either through the url or user can upload image from the device. In those two situations
- If user uploads image via link then there is no problem as it just put a img tag and set's it's source to the url of image
- But if user uploads image from its device than img tag stores the image as base64 data.
Exact Idea
So in the second option the actual image is sent to the server as the base64 encoded data, That means if you applied summernote to a text area and upload a image than the request going to the server will look like
<p> Image uploaded </p> <img src="data:image=some_long_base64_image_data">
Now what you have to do is just grab the base64_image data , convert that data into the image and then replace the data:url with src with src having value to url that gives the image in response.
What we want
- We want to do is crawl the dom to get the every img tag which have data;url attribute
- Get image back from data:url and store it in the particular space
- Replace the data:url with src where src has url to the image
Code That Work on backend
This function will work in laravel but might not work in other. Here we have used packages intervation/image which is responsible for image manipulation.
You can use this function in every where you need, just add this function to the file of you own helper functions class.
✋
You can use this function in every where you need, just add this function to the file of you own helper functions class.
✋
hello how i can use this on laravel, i already try this on my controller (i get text from request and trying use this function)
ReplyDelete// Code at my controller //
Deletepublic function store(Request $request)
{
$post = new Post();
$post->title = $request->title;
$post->detail = b64toUrl($request->detail); /* I am using this function here */
$post->save();
return redirect()->route('posts.index');
}
Visit this urls
For view File
https://github.com/mchampaneri/astonSource/blob/final/resources/views/workspace/faculty/posts/create.blade.php
For Controller File
https://github.com/mchampaneri/astonSource/blob/final/app/Http/Controllers/PostController.php
In your database make sure you set the type of detail ( where you going to store the data come from summernote) as longtext ( or medium blob )
DeleteThis comment has been removed by the author.
ReplyDelete