Laravel Checklister. Part 15/29: CKEditor with Image Upload

in this video of creating checklister it's another video of going a little back to the c key editor of creating a new task or editing a new task at the time we hadn't implemented the image upload and it's time to fix that issue so in this video we will implement our own custom image upload adapter to siki editor so currently as it stands we have this script in the edit blade of checklists just enabling editor and that's it so there is no file upload logic so if we try to upload some image it will throw an error let's take a look it doesn't even work but if we take a look at the network the error is file repository no upload adapter and there's a link to the docs pretty convenient error message which says that you need to enable an upload adapter so here's how it works in cke editor to upload the images you need to have some kind of upload adapter and enable it what is upload adapter in the overview section of image upload on the documentation of cq editor you can see that there are official upload adapters and they are premium so you need to pay extra for easy image or ckfinder or maybe others but you can implement your own adapter so one of those links is you can also implement your own image upload adapter and this is exactly what we will do there's a good documentation on custom image upload adapter and we can almost copy paste the code so there's a lot of text and i will link that in the description of this video so you can read it all but basically we will copy and paste the class of my upload adapter javascript class and one by one i will explain the parts and we will customize it for laravel in short you need to have two things you need to have javascript class to upload the adapter and then the back end url to process the image uploads and in this case we will use spicy media library but also in a weird interesting way we will get to that but first class my upload adapter should be a class that then is included in this part in classic editor as a parameter you define the class and then you use that class but one by one let's create that class inside of the same javascript section for now let's just copy class my upload adapter with these two methods and then we'll add more methods so here in the script we define class upload adapter and by default we don't need to change anything here start the upload process this is the javascript magic of ckeditor and then we add more methods according to the documentation again you can read it all in depth but i will just copy paste explaining some parts this is the most important part probably for us init request method so to the same class we add init request method and this is the url that should be responsible for the upload and we need to change that from this to our route of some kind which doesn't exist yet so here we'll have for example admin dot image upload something like that and also to avoid csrf error we need to add another parameter of csrf token and the syntax for that is i will paste from my nodes is set request header so csrf token is actually a header of xcsrf token behind the scenes and we pass a new csrf token okay next we go through the documentation and almost copy paste the same thing init listeners this method is important to get the response url so our script our php script laravel script should return the response in json with url as a part of that and then some method for upload which doesn't really matter that much but we copy and paste that one as well and we need to change actually we don't need to change but we need to take care of this part so response should contain the url and what else send request of course that is also important but also we don't change anything here it's just the default how javascript works with form data we append the upload file and i guess that's it probably now we need to activate our plugin our class with a few lines of code first we need to this create a function which would use that class so we created a class then we after that class we create a function that would use our adapter so let's create it simple upload adapter for example simple upload adapter plugin and then we can add that as a parameter to the actual text area as extra plugin so something like this here we need to add a parameter paste as an extra plugin and the name of that plugin is simple upload adapter plugin like this and that loader is underlined invalid number of arguments expected zero probably i forgot the constructor let's go back to the documentation and see if there is a constructor for that class of course my upload adapter should have a constructor in javascript so that's the problem of copy pasting stuff you can copy paste from the documentation but you need to know what you're doing and you need to be able to debug it so now no errors at least not visible nothing underlined and let's try it out it should throw an error but this time a different error admin image upload is not defined and let's create that route so first we'll create a controller for that php design make controller image controller for example which will take care of all the image uploading and then we use that image controller actually let's open it and create a simple function for now it will be empty but public function store with request as a parameter http request and with empty body for now let's use it in the routes web here in the admin route group we will create route post images for example kind of like a resource controller but just with one method so image controller class the method is store and the name should be images store the full name would be admin imagestore because we have the prefix here admin dot and let's try to reference that in our edit blade our route name was admin images upload let's change that to images store and let's refresh the page it should not throw that error great no errors here either and let's try to upload something now it should throw 500 as i expect yeah so that's a javascript error but you see down below it's already uploaded but the error is related to the fact that it doesn't return url so in our js file in edit blade here it expects response url to come back so for now let's try to fake that with returning response json as array of url some image url for example totally random example of my url from laravel daily blog old laravel blog and that's it response json should be working let's try it out we refresh we try to upload and let's see what happens see the url comes back with the image so that's exactly what we need to do now let's take care of the actual upload on the back end on the back end as i said before we'll use a package called spicy media library i like it very much i use it in a lot of projects and what it does it allows you to have one line of code to actually upload the file and assign it to a certain record like task id or page id or something we won't actually need to assign that to the id and we will kind of fake it so it would be a weird way of using that but it's really simple to install and for simple image uploads i really like the spicy media library so step by step let's install that so composer requires python media library with version 9 at this point or version 9.6 to be exact what else we need to do vendor publish and then it creates a migration for media table which uses polymorphic relations i will show you that in a minute perhaps that's it that's all we need to configure by default and in our database we have a new table called media if we take a look at the structure it has two things model type and model id which means what that file is attached to so for example task id would be model task and id of the tasks table but for now for our upload what we need to do in here is just create some kind of object of a model which would be kind of fake and in here in this field we will have zero value model id it's not a physical relationship on the database level from model id like foreign key to models or two tasks it's kind of like a fake relationship polymorphic is so we can assign zero here and just bear with me i will explain in that in a minute so we create a new task new task new model empty then assign the task id is zero then fake that task already exists and then we will assign one line of spite media library to upload that image and assigned to the collection to do that in the model of tasks we need to add a few things related to media library first implements has media from spitey media library and then in the use interacts with media two things how we prepare the model then in the controller we can use that model object to do one sentence like add media from request request like this request name keyname is upload to media collection and we can call that collection somehow for example images and that upload corresponds to if we add our javascript if we take a look at javascript this one data append upload and by this point the file should be uploaded to the storage folder or to whatever you specify in config media library and in config file system file in the config and then it should be added to media collection which means it is saved in the database it's data then we need to assign that to the file so let's call it image and then instead of that hard coded url we need to return image as party media library offers some methods for example get url so let's see if it works and then it will re-explain it a bit more refresh our page try to upload the file and it worked so we have our file and then we save the task for example task test save the task and if we go to editing of that task we have that image it's already in the database in the file system everywhere let's take a look exactly how if we go to our media table and go to the data refresh that here's the data model type is the name of the model the eloquent model model id is zero and then all the other fields are about file names so screenshot png size and other stuff so basically it's the media table for any media throughout all the project and we'll have media for tasks for checklists and for pages or maybe even more in the future now in the file system that file is in the storage app public and then each file i was testing before that each file corresponds to its own id in the media table so id1 corresponds to the folder so each file belongs to a folder i haven't deleted previous tests but anyway so this is the file that was uploaded in storage app public and you need to run artisan command php artisan storage link to make those files public and accessible and let's try to actually view that task from the user's perspective let's log out and log in or register as any user so register as a new user this one here task test we open it up and we see the image of course it doesn't look good because it's too big but it generally works so with that in mind i will explain what is happening here task is the model assigned to laravel media library and we can add the media from request and upload it to media collection collection could be images or you can separate the collections here's the collection name in the database you can separate like pages tasks or checklists or something like that but in our case we don't do that we just upload the images then we return that url by spicy media library and that url is called by that blade file or in fact by javascript in the blade file of upload adapter in c key editor now let's fix the bug of two big image and we will have conversions and this is one of the reasons why i like spicy media library it makes it easy to do thumbnails or conversions as they call them all you need to do is in your model which is in our case task just define a method with the name of so called conversions let's make the name thump or let's actually leave it as it is media should be autocompleted by phpstorm and let's just add a width of 600 and nothing else you can specify more parameters here in the documentation you can find more of them but let's just define the thumb and then in the url of image controller we should get the url with the parameter of conversion name which is thumb exactly as we specified that so we go to our checklist and let's add another task and let's upload another screenshot and see it's smaller but we save the task and let's see how it looks from user's perspective so i log in as user again go to checklist go to this and this is smaller now not in full size it's 600 pixels width so for now i will leave it hardcoded as 600 and then with the client i will test how it should look exactly and final thing we need to do in this video is implement the same thing in other areas where we have c key editor so if we go to resources resources and finding files of editor we have editor in checklists added and tasks edit and pages added so how will we use the same thing the backend part stays almost the same the only thing we can change here is remove the request because we don't actually use that variable and then let's take care of the front end so here in the checklist edit blade we need to copy and paste that somewhere to be reused by other blade files like tasks edit here or something like that so let's create a separate file i thought it could be a js file like ckeditor.js but the problem here is that there are blade variables there like routes and csrf token so let's create another blade file in resources views admin and let's create a file ckey editor blade php put the script here put the code from there and here we have the let me show you the route here available because it's a blade file not a js file and csrf token is also available to us great now in our main app blade we can include that url that blade file somewhere here so for example include admin dot ck editor like this and it should work so in edit blade simple upload adapter plugin should already exist we will try it out actually let's try it out now we refresh the page tk editor is loading and upload does it work it works so we didn't break anything in the checklist edit now let's try to use the same thing create with plugins and tasks edit blade like this so copied and pasted and if we go to task edit this one it works and let's try to upload one more image into the same text area and see if it worked another image another screenshot we save the task we go to edit again and we have two images it worked great so this is the way how we can reuse the same plugin for other edit blade tasks and finally we need to have it in pages edit blade at the bottom copy and paste here probably we could refactor even this one somewhere or maybe we should add that to the blade file thinking about it it's absolutely identical for all of them so let's try it out actually delete that and then in c editor blade paste that so in pages edit there's no script or in fact let's include that here admin ckey editor and we don't need to include that in the app blade that would be probably the best idea so then it would be included here in the script only on those pages that is actually required let's write out pages edit we go to pages edit for example welcome page it seems like it's working let's try to upload something on the welcome page save page and if we go to our welcome it works great so let's remove those edit blade sticky editors from here and instead we include admin cq editor here in the checklist edit blade and in the tasks edit blade we should do the same so copy and paste and not even that actually final thing final experiment maybe we should load c editor only in that include so by default it wouldn't be loaded in all the project only in c editor blade we load the cq editor on top and then load the script let's try it out editing the page does it work i think it works save something save page and then let's see if it worked it did work even refactored on the fly so that cq editor wouldn't be repeated on every page and it seems to work well okay so this is how pretty hard it is to upload the adapter for c key editor and it's even harder if you customize it even more so you can read seek editor documentation for more information or use their premium plugins to make it a bit easier for you but for now at least i can upload the latest changes to the server tell the client that they can manage the pages now

Channel: Laravel Daily

Views: 22,778

Keywords:

Id: hufhhf2MSHU

Length: 18min 55sec (1135 seconds)

Published: Mon May 24 2021