Добавить пользовательские заголовки для загрузки изображения - PullRequest
Новая
       7

Добавить пользовательские заголовки для загрузки изображения

0 голосов
/ 18 октября 2018

В настоящее время я пытаюсь интегрировать ReactComponent CKeditor 5 в мое приложение.

У меня проблема с функцией загрузки изображений ... Я использую Node / Expressбэкэнд, который использует промежуточное ПО аутентификации JWT, поэтому каждый запрос должен иметь заголовок Authorization для передачи.

Я хочу знать, возможно ли одно из следующего:

  • способ добавить пользовательский заголовок к компоненту
  • способ перезаписать обработчик загрузки и вызвать вместо него пользовательский обработчик, в котором я могу делать то, что когда-либо

Ниже мой код 

<CKEditor
  editor={ClassicEditor}
  data="<p>Add product description here</p>"
  onInit={(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.handleData(data)
  }}
  config={{
    ckfinder: {
      uploadUrl: `${apiUrl}/upload/images/description`,
    },
  }}
/>

Спасибо

1 Ответ

0 голосов
/ 19 октября 2018

попробуйте с этим кодом в свойстве onInit 

onInit={ editor => {
 editor.plugins.get( 'FileRepository' ).createUploadAdapter = function( loader ) {
  return new UploadAdapter( loader );
 };
}}

после создания класса UploadAdapter 

class UploadAdapter {
  constructor( loader ) {
    // Save Loader instance to update upload progress.
    this.loader = loader;
  }

  upload() {
    const data = new FormData();
    data.append('typeOption', 'upload_image');
    data.append('file', this.loader.file);

    return new Promise((resolve, reject) => {
      axios({
        url: `${API}forums`,
        method: 'post',
        data,
        headers: {
          'Authorization': tokenCopyPaste()
        },
        withCredentials: true
      }).then(res => {
        console.log(res)
        var resData = res.data;
        resData.default = resData.url;
        resolve(resData);
      }).catch(error => {
        console.log(error)
        reject(error)
      });
    });
  }

  abort() {
    // Reject promise returned from upload() method.
  }
}
...