CkEditor, upload: SimpleUploadAdapter, Easy file upload - 08

We are going to implement the changes in the client for uploading files using CKEditor.

Now with our method for uploading files, the next thing we are going to do is implement it on the client. So let's start here by importing this configuration and placing a method like the following. We define the URL and in principle that would be everything:

const editorConfig = {
	***
	plugins: [
		SimpleUploadAdapter,
		***
	],
	simpleUpload:{
		uploadUrl : '/dashboard/post/upload/ckeditor',	
		headers: {
			'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
		}
	},
	***

So we come back here we are going to import it anywhere remember that it is the import So it does not matter to place it up here since below are the simple options here is a pending adapter with the name with this name we reference it in the plugins section if we find it up here I am going to place it and with this we can use the option called simple after all this it does not matter the order the important thing is that it is after the plugin all these are the options just as I explained to you before a little when I commented on the structure that we have in all this so we place simple and here we define by the way here I do think that we have to place the Slash:

uploadUrl : '/dashboard/post/upload/ckeditor',	

Setting up CSRF token

If you get a 419 error at the time of upload, you must configure the token

I think this is because of the token. It's true that it's missing. We check the name here. Remember that here we have the CSRF type protection, so we also have to configure it there. Let's see if we already have the meta here. Control U Control F. Here it is. This is the token that we can pass so we simply have to reference it and pass it on. Let's go here and to configure the hierarchies. Well, this goes in the hierarchies. We place hierarchies. We place the token here, exactly this CSRF token:

	simpleUpload:{
		uploadUrl : '/dashboard/post/upload/ckeditor',	
		headers: {
			'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
		}
	},

This is the token that is defined in the master template:

resources\views\dashboard\master.blade.php

<meta name="csrf-token" content="{{ csrf_token() }}">

Which we select using the querySelector.

08-02-2025 - Andrés Cruz

En español

• Category
• /
• Laravel
• /
• CkEditor, upload: SimpleUploadAdapter, Easy file upload - 08