CKEditor 5 image upload error in React Js

Question

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:

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

which version of CKEditor you are using? did you set the cors policy? — amirhe, Mar 30 '21 at 08:02
It doesn't make sense, please double-check your cors policy here is a [link](https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9) and here is a [post](https://stackoverflow.com/a/43881141/10321531). — amirhe, Mar 30 '21 at 09:12
Add the `options` below uploadUrl: `options: { resourceType: 'Images' }` — Ezequiel S. Sandoval, Mar 30 '21 at 20:59

consager · Answer 1 · 2021-04-06T20:46:00.717

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.

I haven't a server-side application. How I build it? otherwise, I haven't idea about use uploading functionality — Anushka Praveen, Apr 06 '21 at 16:27
@AnushkaPraveen Check out Cloudinary, see if you can make sense of that. I've updated the answer to explain it a bit. Otherwise that's a way too big topic for a question here, and honestly a whole profession. — consager, Apr 06 '21 at 20:44

CKEditor 5 image upload error in React Js

1 Answers1