CODEWITHSUNDEEP
reactjsckeditor5
Anushka Praveen
Anushka Praveen

Reputation: 139

CKEditor 5 image upload error in React Js

I tried the official upload command, but it's not working.

This is the CKEditor part

<CKEditor
  placeholder="write"
  editor={ClassicEditor}
  data={this.state.body}
  /*  config={{ckfinder: {
    // Upload the images to the server using the CKFinder QuickUpload command.
    uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
  }}} */                      
  onReady={(editor) => {
    // You can store the "editor" and use when it is needed.
    console.log("Editor is ready to use!", editor);
  }}
  onChange={(event, editor) => {
    const data = editor.getData();
    this.setState({ body: data });
  }}
/>

After inserting this, I can upload a picture, but a message pops up with the following:

This message pop up

The console displays this error

Access to XMLHttpRequest at 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json:1

Failed to load resource: net::ERR_FAILED

Upvotes: 4

Views: 2720

Answers (1)

consager
consager

Reputation: 277

It looks like you are trying to upload the images to the url "https://example.com/... which, as far as I can tell, is just a default value for the upload configuration, but not meant as a proper URL for file-uploads.

According to the documentation:

To use this upload adapter, you must provide a server–side application that will handle the uploads and communicate with the editor, as described in the following sections.

This means that you need to have access to a server side application to upload your images onto.

If you have that, you can follow the configuration guide here to set the uploadUrl to the correct address.
If you don't have access to a server-side application, you will need to obtain it if you want to use the uploading functionality. A simple suggestion may for example be Cloudinary, which is a Software as a Service provider that can act as an endpoint for your uploaded files. It should be a whole lot easier than trying to create a server app on your own.

Upvotes: 2

Related Questions