Unable to upload image using Jodit Editor in react app for production version
See original GitHub issueWe 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.
Issue Analytics
- State:
- Created 4 years ago
- Comments:11
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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 },
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?