JavaScript/jQuery HtmlEditor - imageUpload

Configures the image upload.

Default Value: { tabs: ['url'], fileUploadMode: 'base64', uploadUrl: undefined, uploadDirectory: undefined }

View Demo

Click the 'Add Image' toolbar button to invoke the 'Add an Image' dialog.

DevExtreme Html Editor - Upload Images Dialog

Use the fileUploadMode property to specify whether to upload images as is or in Base64 binary format. The tabs property specifies the visibility of tabs in the 'Add Image' dialog.

index.js
  • $(function() {
  • $("#htmlEditorContainer").dxHtmlEditor({
  • // ...
  • imageUpload: {
  • fileUploadMode: 'both',
  • tabs: ['url', 'file'],
  • uploadUrl: 'https://js.devexpress.com/Demos/Upload'
  • uploadDirectory: '/Images'
  • }
  • });
  • });

fileUploaderOptions

Configures the file uploader options.

Default Value: null

See FileUploader Configuration for properties that you can specify in this object.

index.js
  • $(function() {
  • $("#htmlEditorContainer").dxHtmlEditor({
  • // ...
  • imageUpload: {
  • fileUploaderOptions:{
  • maxFileSize: 4000000
  • }
  • //...
  • }
  • });
  • });

fileUploadMode

Specifies how the HtmlEditor UI component uploads files.

Type:

String

Default Value: 'base64'
Accepted Values: 'base64' | 'server' | 'both'

View Demo

Refer to the imageUpload topic to see an example.

tabs[]

Contains an array of tabs in the "Add an Image" dialog.

Default Value: ['url']
Accepted Values: 'url' | 'file'

View Demo

Refer to the imageUpload topic to see an example.

uploadDirectory

Specifies a target directory for uploaded images.

Type:

String

Default Value: undefined

View Demo

The uploadDirectory property is in effect only if the fileUploadMode property value is server or both.

Refer to the imageUpload topic to see the example.

uploadUrl

Specifies a target Url for the upload request.

Type:

String

Default Value: undefined

View Demo

The uploadUrl property is in effect only if the fileUploadMode property value is server or both.

Refer to the imageUpload topic to see the example.