79410107

Date: 2025-02-03 22:04:40
Score: 1
Natty:
Report link

Try this solution. You can also follow this tutorial which helped me: https://www.youtube.com/watch?v=hufhhf2MSHU

class MyUploadAdapter {
  constructor(loader) {
    // The file loader instance to use during the upload.
    this.loader = loader;
  }

  // Starts the upload process.
  upload() {
    return this.loader.file
      .then(file => new Promise((resolve, reject) => {
        this._initRequest();
        this._initListeners(resolve, reject, file);
        this._sendRequest(file);
      }));
  }

  // Aborts the upload process.
  abort() {
    if (this.xhr) {
      this.xhr.abort();
    }
  }

  // Initializes the XMLHttpRequest object using the URL passed to the constructor.
  _initRequest() {
    const xhr = this.xhr = new XMLHttpRequest();

    xhr.open('POST', '{{route("image-upload")}}', true);
    xhr.setRequestHeader('x-csrf-token', '{{ csrf_token()  }}');
    xhr.responseType = 'json';
  }

  // Initializes XMLHttpRequest listeners.
  _initListeners(resolve, reject, file) {
    const xhr = this.xhr;
    const loader = this.loader;
    const genericErrorText = `Couldn't upload file: ${ file.name }.`;

    xhr.addEventListener('error', () => reject(genericErrorText));
    xhr.addEventListener('abort', () => reject());
    xhr.addEventListener('load', () => {
      const response = xhr.response;

      if (!response || response.error) {
        return reject(response && response.error ? response.error.message : genericErrorText);
      }

      resolve({
        default: response.url
      });
    });

    if (xhr.upload) {
      xhr.upload.addEventListener('progress', evt => {
        if (evt.lengthComputable) {
          loader.uploadTotal = evt.total;
          loader.uploaded = evt.loaded;
        }
      });
    }
  }

  // Prepares the data and sends the request.
  _sendRequest(file) {
    // Prepare the form data.
    const data = new FormData();

    data.append('upload', file);

    // Send the request.
    this.xhr.send(data);
  }
}

function SimpleUploadAdapterPlugin(editor) {
  editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
    // Configure the URL to the upload script in your backend here!
    return new MyUploadAdapter(loader);
  };
}

ClassicEditor.create(document.querySelector('#description_editor'), {
    extraPlugins: [SimpleUploadAdapterPlugin]
  })
  .then(editor => {
    editor.setData(document.querySelector('#description').value);
    editor.model.document.on('change:data', () => {
      document.querySelector('#description').value = editor.getData();
    })
  }).catch(error => {
    console.error(error);
  });
<div class="mb-3">
  <label for="description" class="form-label">{{__('strings.description')}} <span class="text-danger">*</span></label>
  <div class="ck-editor" id="description_editor"></div>
  <textarea name="description"
        class="form-control @error('description') border-red-500 @enderror mt-1 rounded-md ms-2"
        id="description"
        aria-describedby="descriptionHelp"
        placeholder="" required hidden></textarea>
  @error('description')
  <div id="descriptionHelp" class="form-text">{{ $message }}</div>
  @enderror
</div>

Reasons:
  • Blacklisted phrase (1): this tutorial
  • Blacklisted phrase (1): youtube.com
  • Whitelisted phrase (-1): Try this
  • Probably link only (1):
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (0.5):
Posted by: MORFEUS