Upload adapter is not defined.

[adnanrafique]

How can I solve this issue in angular 5? I have seen a lot of documentation but literally I couldn't understand a single thing. Please help me in this. Thank you.

[Reinmar]

Hi! I'm sorry to hear that. Could you write more about where are you, what did you try, what you've read, what pieces you did not understand, etc? That will allow us to better understand the problem and hopefully help you.

[adnanrafique]

I've implemented the ckeditor5-angular following the documentation here. It has been implemented but when I try to upload the image it gives the following error in the browser console.

filerepository-no-upload-adapter: Upload adapter is not defined. Read more: https://docs.ckeditor.com/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter

Now, I've followed the above link but I can't understand a single thing about how I can resolve this in angular 5.

[Reinmar]

Now, I've followed the above link but I can't understand a single thing about how I can resolve this in angular 5.

I'm sorry, but this is still very vague so I don't know at what point I should start. But, generally speaking, you need to:

• either configure one of the existing upload adapters (for the mentioned Easy Image or for CKFinder)
• use another upload adapter (a 3rd party one or implement your own one)

How to configure the editor is explained in this repo's README. And there are more links in the error code description that you've seen.

[adnanrafique]

Yes, Yes, that's what I am talking about....

How to configure one of the existing upload adapters (for the mentioned Easy Image or for CKFinder)?

This is where I am stuck.

[adnanrafique]

I did ran the command for installing easy-image but it still do not work.

npm install --save @ckeditor/ckeditor5-easy-image

[Reinmar]

Easy Image:

https://ckeditor.com/docs/ckeditor5/latest/api/module_cloud-services_cloudservices-CloudServicesConfig.html

All the options are described there with links to further documents. But to use it, you need to be Easy Image's user.

CKFinder:

https://ckeditor.com/docs/ckeditor5/latest/api/module_adapter-ckfinder_uploadadapter-CKFinderAdapterConfig.html

And again, to use it, you need to have CKFinder installed on your server (and then I think you'll know then what that upload URL is).

[adnanrafique]

I am so numb, I understand what you are trying to say, I've spent whole day looking into these but, As I am using angular5, I don't understand where to put following code. Please help.

ClassicEditor .create( editorElement, { ckfinder: { uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json' } } ) .then( ... ) .catch( ... );

[ma2ciek]

Hi, @adnanrafique.

Here is an example of how to set a custom CKEditor config through the component.

[adnanrafique]

Hello @ma2ciek thank you for your response. I was able to select image using ckfinder by configuring it, thanks to you.

Now I have another issue, I want to upload the image into my s3 bucket and simple url(path) won't let me do it. It say cannot upload image.

<ckeditor [(ngModel)]="text_answers[question .id]" [config]="{ ckfinder: {uploadUrl: 'https://bucket-name.s3.amazonaws.com/'} }" [editor]="Editor"></ckeditor>

Please help me how I can do this?

[ma2ciek]

Hi,

Sorry, I've overlooked your question.

Do you still have a problem with the ckfinder? Are you sure that the uploadUrl endpoint is set correctly?

[adnanrafique]

@ma2ciek It's all right. I was able to upload the image.

Are you sure that the uploadUrl endpoint is set correctly?

this is the real problem, When we try to upload to s3 bucket there is a lot of configuration and access key etc to make it able to upload to s3 bucket. The question is how can I upload the image from simple url. I don't think aws provide this feature.

[jswiderski]

Let me give you an example of integration between CKFinder 3.4.4 PHP and CKEditor 5 Angular component.

First of all if you want to use CKFinder together with CKEditor 5, you need to use CKFinderAdapter which has one configuration setting - uploadUrl which should point to CKFinder connector.

Below is the sample editor configuration for CKFinder:

<ckeditor [config]="{ ckfinder : { uploadUrl : '/testapp/ckfinder344/core/connector/php/connector.php?command=QuickUpload&type=S3&responseType=json' } }" ...></ckeditor>

Please notice the type=S3 parameter and start of the uploadUrl. We will get to that later.

This is basically all you need to do for editor configuration.

---

Now you need to configure CKFinder.

In my example CKFinder was installed in /testapp/ckfinder344 folder. This is important when specifying path for the CKFinder connector in editor uploadUrl property as paths has to match. The path to uploadUrl can either be a full path starting with http(s):// or like in our example path starting with application context.

Configuration changes cod CKFinder are made in ckfinder/config.php file (in our case this is /testapp/ckfinder344/config.php). You need to configure AWS S3 backend and resource type for it there. How to do this has been described in CKFinder documentation:

• https://ckeditor.com/docs/ckfinder/ckfinder3-php/configuration.html#configuration_options_backends_amazons3
• https://ckeditor.com/docs/ckfinder/ckfinder3-php/configuration.html#configuration_options_resourceTypes

In our example we are going to use below configuration (please note that you need to have S3 account set up first):

$config['backends'][] = array(
    'name'         => 'awss3',
    'adapter'      => 's3',
    'bucket'       => 'ckfinder-test-bucket',
    'key'          => 'your-key-goes-here',
    'secret'       => 'Your-secret-value-goes-here',
    'visibility'   => 'public', 
    'baseUrl'      => 'http://s3-eu-central-1.amazonaws.com/ckfinder-test-bucket/test/',
    'root'         => 'test',
    'region'       => 'eu-central-1' 
);

$config['resourceTypes'][] = array(
    'name'              => 'S3',
    'directory'         => 'myS3',
    'maxSize'           => 0,
    'allowedExtensions' => 'jpg,png,txt',
    'deniedExtensions'  => '',    
    'backend'           => 'awss3',
    'lazyLoad'          => true
);

It's worth taking a note of the following details:

• the backend value for resource type is the same name value in backend. This is the way to assign particular resource type to the particular backend.
• The value of type parameter in URL in CKEditor configuration matches the value of name property in resource type configuration: 'name' => 'S3', type=S3. This is very important if you want your files to be uploaded to the desired resource type (S3 in this case).

If this is still unclear, please read CKFinder documentation, please follow my instructions and tell me where you got stuck.

When going through CKFinder docs, it is important not to miss: https://ckeditor.com/docs/ckfinder/ckfinder3-php/system_requirements.html https://ckeditor.com/docs/ckfinder/ckfinder3-php/quickstart.html

Please also see the video showing that configuration works. In the video I'm uploading the file through CKEditor 5 and then open standalone CKFinder to make sure the file was really uploaded. works.zip

[ma2ciek]

I'm closing it as resolved. If you have still some problems, let us know.

[kisu5058]

I have same issue in my project in angular i have implemented ckeditor5 in my project but i am not able to upload image so how can i configure ckFinder in angular 8