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

See original GitHub issue

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. image

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.

Issue Analytics

  • State:open
  • Created 4 years ago
  • Comments:11

github_iconTop GitHub Comments

1reaction
tchaitanyacommented, May 31, 2019

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 },

0reactions
Markal03commented, Dec 4, 2019

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?

Read more comments on GitHub >

github_iconTop Results From Across the Web

How To Properly Insert Uploaded Image With Jodit Editor
Unable to upload image using Jodit Editor in react app for production version hot 29. . Integrate filebrowser in Joomla CMS. Uploader options...
Read more >
React JoditEditor insert image not working
I couldn't write anything in the text field while adding a URL(image, video, file) while using the jodit editor in material-ui modal. Your ......
Read more >
jodit | Yarn - Package Manager
An excellent WYSIWYG editor written in pure TypeScript without the use of additional libraries. Its file editor and image editor. Build Status npm...
Read more >
React component - CKEditor 5 Documentation
The easiest way to use CKEditor 5 in your React application is by choosing one of the rich text editor builds. Additionally, it...
Read more >
Jodit React Editor Upload to the server : r/reactjs
I am using Jodit React Editor and i would like to know how can i upload images and files to the server instead...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found