Unable to upload image using Jodit Editor in react app for production version

[tchaitanya]

We are using Jodit Editor in our React application to use as rich text editor.

When we deployed our application on Azure and tried to upload image using jodit editor, we are getting following error.

Jodit Version: ^1.0.26 Webpack Version: ^4.32.2

We are using type script for building our React app.

Code

import * as React from 'react';
import './jodit.min.css';
import 'jodit/build/jodit.min.js';
import JoditEditor from 'jodit-react';

interface IProps {
  message: string;
}

interface IState {
  // tslint:disable-next-line:no-any
  editorState: any;  
}

class AddNotificationModal extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      editorState: this.props.message,
    };

  // tslint:disable-next-line:no-any
  updateContent(e: any) {
    this.setState({
      editorState: e
    });
  }
  config = {
    zIndex: 0,
    readonly: false,
    activeButtonsInReadOnly: ['source', 'fullsize', 'print', 'about'],
    toolbarButtonSize: 'middle',
    theme: 'default',
    enableDragAndDropFileToEditor: true,
    saveModeInCookie: false,
    spellcheck: true,
    editorCssClass: false,
    triggerChangeEvent: true,
    height: 220,
    direction: 'ltr',
    language: 'en',
    debugLanguage: false,
    i18n: 'en',
    tabIndex: -1,
    toolbar: true,
    enter: 'P',
    useSplitMode: false,
    colorPickerDefaultTab: 'background',
    imageDefaultWidth: 100,
    removeButtons: ['source', 'fullsize', 'about', 'outdent', 'indent', 'video', 'print', 'table', 'fontsize', 'superscript', 'subscript', 'file', 'cut', 'selectall'],
    disablePlugins: ['paste', 'stat'],
    events: {},
    textIcons: false,
    uploader: {
      insertImageAsBase64URI: true
    },
    placeholder: '',
    showXPathInStatusbar: false
  };

  render() {    
    return (
         <div
            style={{
              marginTop: '10px',
              backgroundColor: 'white',
              width: '600px',
              fontFamily: 'Roboto Regular',
              fontSize: '13px'
            }}>
            <JoditEditor value={this.state.editorState} config={this.config} onChange={e => this.updateContent(e)} />
          </div>
    );
  }
}

export default AddNotificationModal;

Expected behavior: Should be able to upload the image and show in the Jodit Editor

Actual behavior: Facing "Need URL for AJAX Request" error when trying to upload image. Can you please suggest a fix for the below error. We tried many options but they didnt work out.

[tchaitanya]

@xdan : Please check this issue.

[jmcorpdev]

the base of the configu and the message is very CLEAR, "Need URL for AJAX Request"

Where have you set the url for uploader of filebrowser ?

const CONFIG = {
  uploader: {
    url:"/api/upload",
  },
  filebrowser: {
    ajax: {
      url: "/api/file/files",
    },
    uploader: {
       url:"/api/upload"
    },
  },
};

<JoditEditor value={this.state.content} config={CONFIG} onChange={this.onChange} />

[tchaitanya]

We are not uploading images and we are using Base 64 Encoding and storing the image as part of the html data. That's why we have used the below config setting

uploader: { insertImageAsBase64URI: true },

[tchaitanya]

@xdan , @arnogues : Can you please check this issue and provide a solution for it.

[tchaitanya]

@xdan , @arnogues : We tried adding uploader, filebrowser section, added url for both of them and tested it. Still we are facing the same issue.

[shivam4786]

i'm facing issue when viewing images after sometime, that sometime may be the time the image is available at server, after sometime that image does not appear in editor and in network tab error occured. i want to use my url, how i can use it ?

[shivam4786]

We are using Jodit Editor in our React application to use as rich text editor.

When we deployed our application on Azure and tried to upload image using jodit editor, we are getting following error.

Jodit Version: ^1.0.26 Webpack Version: ^4.32.2

We are using type script for building our React app.

Code import * as React from 'react'; import './jodit.min.css'; import 'jodit/build/jodit.min.js'; import JoditEditor from 'jodit-react';

interface IProps { message: string; }

interface IState { // tslint:disable-next-line:no-any editorState: any; }

class AddNotificationModal extends React.Component<IProps, IState> { constructor(props: IProps) { super(props); this.state = { editorState: this.props.message, };

// tslint:disable-next-line:no-any updateContent(e: any) { this.setState({ editorState: e }); } config = { zIndex: 0, readonly: false, activeButtonsInReadOnly: ['source', 'fullsize', 'print', 'about'], toolbarButtonSize: 'middle', theme: 'default', enableDragAndDropFileToEditor: true, saveModeInCookie: false, spellcheck: true, editorCssClass: false, triggerChangeEvent: true, height: 220, direction: 'ltr', language: 'en', debugLanguage: false, i18n: 'en', tabIndex: -1, toolbar: true, enter: 'P', useSplitMode: false, colorPickerDefaultTab: 'background', imageDefaultWidth: 100, removeButtons: ['source', 'fullsize', 'about', 'outdent', 'indent', 'video', 'print', 'table', 'fontsize', 'superscript', 'subscript', 'file', 'cut', 'selectall'], disablePlugins: ['paste', 'stat'], events: {}, textIcons: false, uploader: { insertImageAsBase64URI: true }, placeholder: '', showXPathInStatusbar: false };

render() { return ( <div style={{ marginTop: '10px', backgroundColor: 'white', width: '600px', fontFamily: 'Roboto Regular', fontSize: '13px' }}> <JoditEditor value={this.state.editorState} config={this.config} onChange={e => this.updateContent(e)} />

); } }

export default AddNotificationModal;

Expected behavior: Should be able to upload the image and show in the Jodit Editor

Actual behavior: Facing "Need URL for AJAX Request" error when trying to upload image. Can you please suggest a fix for the below error. We tried many options but they didnt work out.

If you use WebPack4, the solution is install terser-webpack-plugin

npm install terser-webpack-plugin --save-dev

and in module.export put:

optimization: { minimizer: [ new TerserPlugin({ terserOptions: { ecma: undefined, warnings: false, parse: {}, compress: {}, mangle: true, // Note mangle.propertiesisfalse by default. module: false, output: null, toplevel: false, nameCache: null, ie8: false, keep_classnames: undefined, keep_fnames: true, safari10: false } }) ] }

[Trupal00p]

I had the same issue. Using javascript, and create-react-app.

I didn't want to eject into webpack, so I solved it by loading Jodit from the CDN. Then you can just call Jodit from the window object:

const editor = new window.Jodit(someRef.current, config)

[songoten28]

take a look at #157

[mahendrakulkarni177]

I found the solution which works on both development and production build..

solved using UglifyJsPlugin, config changes in webpack..

optimization: { minimizer: [ new UglifyJsPlugin({ cache: true, parallel: true, extractComments: false, uglifyOptions: { ie8: false, mangle: { reserved: ['Jodit'], }, compress: { if_return: true, unused: true, booleans: true, properties: true, dead_code: true, pure_getters: true, unsafe: true, unsafe_comps: true, drop_console: true, passes: 2 }, output: { comments: false, beautify: false, }, minimize: true } }), ], },

I found this config setting in jodit editor demo project.. https://xdsoft.net/jodit/

download project and check in the webpack config file.

[Markal03]

The same issue can also be found in Angular applications only in production version.

What I've tried so far is to add the Terser plugin but it doesn't seem to work.

Does anybody have workaround for that?