Skip to main content

Upload image with WYSIWYG editor in laravel

Upload image within texteditior
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

  1.  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
  2. 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.


  1. 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)

    1. // Code at my controller //
      public function store(Request $request)
      $post = new Post();
      $post->title = $request->title;
      $post->detail = b64toUrl($request->detail); /* I am using this function here */
      return redirect()->route('posts.index');

      Visit this urls

      For view File

      For Controller File

    2. 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 )

  2. This comment has been removed by the author.


Post a Comment

Popular posts from this blog

Apache : setup basic auth with apache in windows

Authentication is any process by which you verify that someone is who they claim they are. Authorization is any process by which someone is allowed to be where they want to go or to have information that they want to have. I will show here how to set up basic auth on the apache with windows. Pre-requests  Windows VPS Apache server ( That's it ) ( In windows it might be difficult to setup the Apache alone. So instead use something ling xampp , wamp or laragon .) RestClient (  I personally use the postman , but you can use your preferable client)  Windows VPS provider Steps  Enable the necessary modules in the Apache Create the password file Set the auth directives in the virtual host file. Verify basic auth. Enable the  necessary   modules  in the Apache Open the httpd.conf file in the apache's conf folder. httpd.conf file Enable the necessary modules to make the basic auth working. Necessary modules  mod_auth_basic

Firebase - update a spacific fields of single element of object of array in firestore

Firebase - update a spacific fields of single element of object of array in firestore  Its actully advisable to use map instead of array when ever it is possible. But, there are cetain cases where you don't have option to do so.  For example, you are directly saving the response from some outer source without any modification and they send you an array. In this case you will have array to work with. Firestore does not support array here is why  "bad things can happen if you have multiple clients all trying to update or delete array elements at specific indexes. In the past, Cloud Firestore addressed these issues by limiting what you can do with arrays " For more details information you can refer to Kato Richardson post Best Practices: Arrays in Firebase .  Firestore document having array [ used from stackoverflow question ] Suppose you have array of object something like shown in array. Now you want to update endTime field of the object on the index [1]

Sciter : GUI Application with Golang using HTML/CSS

GUI library for golang sciter This is the words from Sciter's Web site, Sciter brings a stack of web technologies to desktop UI development. Web designers and developers can reuse their experience and expertise in creating modern looking desktop applications. Various GUI frameworks offer different UI declaration and styling languages, such as QML and  XAML (Microsoft WPF) . On the contrary, Sciter allows using time proven, robust, and flexible HTML and CSS for GUI definition and GPU accelerated rendering.   Before using sciter I already tried other alternatives but none of them was satisfactory as an example first i tried andlabs / ui  library   i already have written a post on it. You can read it on post gui programming with golang .  But this library is still under construction and has no support for production apps. Secondly, I go for electron but the problem was my simple calc like the app was of size 150mb. Which is 15mb of go and other was the e