Upload Data in Laravel Using SummerNote Editor with Image

hello everyone this is Yamin and welcome to Epic knowledge in this tutorial I'm going to show you how you can upload data from the summer node test area field in laravel so you can see where the text Will over here like this and if we just paste anything over here we can make it bold we can also add image over here as well let me just choose the image we can also make the in a smaller bigger then here let's just give some more text over here and right now if you click add it will upload the data to the database table so in digital I'm going to show you everything step by step from the very beginning how we can or how can use summon node in laraware so over here I just already create a fresh laravel project as you can see so I let me just run it over here so this is the freshly created laravel project so what we'll do is that we'll have the input field someone not input field over here so for it let's go Vector code and we'll go to Resource used and inside views we have welcome.blade.php so I can just remove everything from here and we'll just have one here HTML so inside the head section first of all we need to add the summer not CDN link so in order to get the sound note serial link let's just search for over here summernote.org we'll just go to this link someone node.org and then we'll just click over here getting started and then if we just go down here we can see we have include J slash CSS so let me just copy this code and I'll paste it in the head section of our code and right now we need to write a form for the body so let me just go back to the browser again and right now if we just go to summoner.org and over here you can see form method post and here you can see text area ID equal to summon node name equal to edit editor data text area so I'll copy this again and paste it over here in the body so here name is not important but the ID is important here you can see IDs some or not so right now let me just copy one more thing from here and that is the JavaScript code from here so let me just copy this and right now we'll just write over here at the end of the body tag we'll write over here script and then inside the script we'll mention or paste the code over here so here you can see basically let me just write it like this so basically uh what is happening is that here you can see ID equal to summon node and here we are measuring that ID and then we are calling the summon function so this function will give us a test area like summon node so right now if we now save this and if we now refresh here we can see we have a server not text field over here so if you want to change the design of this text field you can do it as well you just need to follow the step that is written over here like here you can see height here 200 we can change the text Will height if you want so let me just copy this and here we'll just directly come over here someone node blue flash bracket here we'll give to Second bracket and inside it will mention height will be let's say 300 or 400 let's say save then right now if we just refresh here you can see the height increased over here so right now we can add a lot of text over here and then we will be able to upload those database table so for it first of all let's also just have the subbing button over here so it's over here input type it will be submit and here we say hello will be add and let's say one here class it will be BTN BTN primary so right now if we save this then if we now if I share we have the add button over here so in order to upload this data I already just created table called post over here you can see post table and this table has title and the description field and I'd like to mention onward thing and that is for the Post table uh let me just go to database migration and the post table over here you can see so for the Post table make sure that the description is decision type is long test this one not more one string or anything else make sure it have long test so right now let's go and upload the data tutor other establishes so for it inside this form first of all this over here action I will look to Second bracket then we say here URL to First drag a single quotation list over here upload underscore startup and we also need to add the csrf token over here so right now let's go to our route and create this URL so let's go to Route then web.php and here we are going to say rocket single quotation slash and our route name was upload data copy this and I'll paste it over here then we'll show our here comma to third bracket with our here home controller Tower clone class comma let's say our function name will be upload okay so right now let's go to our home controller and here in the home contract we are going to say public function upload to first bracket first we'll say here request then dollar request and we will also give to Second bracket over here so first of all in order to up to terata we need to First declare variable let's over here dollar post equal to we'll mention that table model name and which is new post model name is post and I'll set the model name at the top over here as well so after this we'll show our here dollar post this Arrow sign with our hair test description equal to dollar request Arrow sign and here if you go to welcome.blade.php here you can see name equal to edit data so instead of edit data list over here description description so let's save this and let's go to home controller and with our hair request description after this with our hair taller post this Arrow sign save then we will just return back to the same view return redirect back so let's save this so we have everything ready we have the input field over here then we have the URL and we have the function over here as well to upload data so let's just refresh here and let me just copy something random from online let's come over here let me just copy this paste it here and let's make it different if you want like this then click add okay the password is not average for this route okay the thing is I obviously missed it in the web.php so this method will be post so let's save this again and right now if we now replace here again browser over here here you can see you have some data in the description let me just show it again without erode this time click add data is upload it you can also make table over here with different kind of data over here okay so but the thing is right now if we just try to upload a image from this summer node text field we'll get a error we have the image field over here we can choose any image from here but we need to write some code in our controller in order to upload the image so right now in order to upload the image what we need to do is that we just try to go to the controller first and here first of all what we do is that before this to all our post equal to new post we'll just declare another variable with over here dollar description equal to we'll say dollar request Arrow sign description so after this I am just going to copy and paste some code over here and don't worry I will also give that code in the comment section so that you will also be able to copy that code so here so I already have the code in the notepad this is total like 13 or 40 line of code I'll also explain this code over here as well so I'll just paste it over here so here after saying description equal to request description we are declining another variable Dom equal to new Dom document we are calling this Dom document function and after this here you can see dollar Dom equal to load HTML so from this here you can see description over here we need to write the same variable over here and here you can see from the description first of all we will load the HTML after that form that HTML here you can see Dom equal to get element by tag name image file so we are basically trying to get the image file and store it in this variable and obviously there can be multiple image files so here you can we have for this Loop in S5 as item image so first of all we will get the image attribute source then we'll get the image total all type of data then we'll just decode the image will give the image a uni unique name using the time function will also have stored the image path and first of all we'll remove the PBS image source over here first of all we'll remove the previous image source and give the new image source and then here you can see we say it over here description equal to Dom save HTML this description is basically this one uh this one okay so we are saying Dom save HTML so after this we'll just remove this taller post description equal to request description to only dollar description which is basically this one okay so right now let's save this so right now we should be able to upload emails from the seven node text field so let's refresh over here so right now let's just give some random text over here I'll just paste some text over here and then let's choose the image from here let's choose this image click open and I would also like to mention one more thing is that there's a limit of how big the image size can be in summon node okay so just make sure to remember this let's just also add a table over here okay just random data and now if I now click add hey data is uploaded so right now if you know if your browser over here so we are also able to upload the emails now let's say we want to show those data in the browser so how can we show those data so in order to show that that those data let's just first create a view for showing data so let's go to our web.php and let me just copy this paste it here and so the route will be get and it will be let's say show underscore data and the function name will be the same thing let's say show underscore data let's save this so right now let's go to our home controller and in this Form controller we are going to say public function show underscore data to first rocket to Second bracket so first of all we'll get all the data from the post table so we'll show over here dollar Tata dollar data equal to whichever here post Tower clone all then we'll just return the view let's say return here the view name will be post underscore data so we'll send the data from here let's say comma compact it will be data okay so right now let's go and create this View Post underscore data and here we say post underscore data Dot blade dot PHP so control s and then save so here I'll say here HTML and inside the body will mention the forage loop with over here at the rate of 4 each dollar data as dollar data and we'll also in the Forest Loop which over here at the top end for each so basically this total will come from here okay this dollar data and inside this first of all in order to print anything in laravel we need to give two second bracket but over here we need to give on second bracket and for this not sign then who is over here dollar data this Arrow sign we say here this description so right now if you now save this we should be able to get the description data from here so right now let's just uh let me just check the URL name URL name is show underscore data so I'll just paste this over here and there you can see we can see the dot over here like this so yeah basically this is how you can use summon it to upload data in loadable and also show data in laravel like this as well so I hope you like this tutorial if you have any question you can always let me know in the comment section if you want more Twitter like this then also then subscribe this channel I will also really appreciate that as well thanks and for watching I hope to see you in the future tutorials

Channel: Web Tech Knowledge

Views: 2,143

Keywords: how to integrate summernote js editor in laravel, how to integrate summernote in laravel, how to use summernote js in laravel, how to make summernote js in laravel, easy way to upload image to tinymce in laravel, summernote js in laravel, how to use summernote editor, summernote editor in php, laravel image upload, summernote, how to use summernote in laravel, integration of summernote editor in laravel, laravel file upload, How to Upload Data in Laravel Using Summernote Editor

Id: YogtQCyMh30

Length: 13min 57sec (837 seconds)

Published: Fri Jun 02 2023