Vue HtmlEditor - imageUpload

Configures the image upload.

Selector: DxImageUpload
Type:

dxHtmlEditorImageUpload

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

View Demo View on GitHub

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.

NOTE
If fileUploadMode is set to server or both, specify uploadDirectory to correctly upload images. If your application does not include a shared folder, check the "Encode to Base64" check box to display an uploaded image as a base64 string.
jQuery
index.js
$(function() {
    $("#htmlEditorContainer").dxHtmlEditor({
        // ...
        imageUpload: {
            fileUploadMode: 'both',
            tabs: ['url', 'file'],
            uploadUrl: 'https://js.devexpress.com/Demos/Upload'
            uploadDirectory: '/Images'
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-html-editor ...>
    <dxo-image-upload
        fileUploadMode="both"
        [tabs]="['url', 'file']"
        uploadUrl="https://js.devexpress.com/Demos/Upload"
        uploadDirectory="/Images">
    </dxo-image-upload>
</dx-html-editor>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxHtmlEditorModule } from 'devextreme-angular';
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxHtmlEditorModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxHtmlEditor ...>
        <DxImageUpload
            fileUploadMode="both"
            :tabs="dialogTabs"
            uploadUrl="https://js.devexpress.com/Demos/Upload"
            uploadDirectory="/Images"
         />
    </DxHtmlEditor>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxHtmlEditor from 'devextreme-vue/html-editor';

export default {
    components: {
        DxHtmlEditor
    },
    methods: {
        // ...
    },
    data() {
        return {
            dialogTabs: ['url', 'file']
        };
    }         
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import HtmlEditor from 'devextreme-react/html-editor';

const dialogTabs = ['url', 'file'];

class App extends React.Component {
    render() {
        return (
            <HtmlEditor ...>
                <ImageUpload 
                    fileUploadMode="both"
                    :tabs={dialogTabs}
                    uploadUrl="https://js.devexpress.com/Demos/Upload"
                    uploadDirectory="/Images"
                />
            </HtmlEditor>
        );
    }
}
export default App;

fileUploaderOptions

Configures the file uploader options.

Selector: file-uploader-options
Type:

dxFileUploader Configuration

Default Value: null

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

jQuery
index.js
$(function() {
    $("#htmlEditorContainer").dxHtmlEditor({
        // ...
        imageUpload: {
            fileUploaderOptions:{
                maxFileSize: 4000000
            }
            //...
        }
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-html-editor ...>
    <dxo-image-upload
        [fileUploaderOptions]="{ [maxFileSize]="4000000" }">
    </dxo-image-upload>
</dx-html-editor>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxHtmlEditorModule } from 'devextreme-angular';
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxHtmlEditorModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxHtmlEditor ...>
        <DxImageUpload
            :file-uploader-options="fu_options" />
    </DxHtmlEditor>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxHtmlEditor from 'devextreme-vue/html-editor';

export default {
    components: {
        DxHtmlEditor
    },
    methods: {
        // ...
    },
    data() {
        return {
            fu_options: {:max-file-size="4000000"} 
        };
    }         
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import HtmlEditor from 'devextreme-react/html-editor';

const fu_options = { maxFileSize={4000000} };

class App extends React.Component {
    render() {
        return (
            <HtmlEditor ...>
                <ImageUpload 
                    fileUploaderOptions={this.fu_options} />
            </HtmlEditor>
        );
    }
}
export default App;

fileUploadMode

Specifies how the HtmlEditor UI component uploads files.

Selector: file-upload-mode
Type:

HtmlEditorImageUploadMode

Default Value: 'base64'

View Demo

If you set fileUploadMode to server or both, you need to specify uploadUrl and uploadDirectory.

Refer to the imageUpload topic to see an example.

tabs[]

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

Selector: DxTab
Type:

Array<dxHtmlEditorImageUploadTabItem | HtmlEditorImageUploadTab>

Default Value: ['url']

View Demo

Refer to the imageUpload topic to see an example.

uploadDirectory

Specifies a target directory for uploaded images.

Selector: upload-directory
Type:

String

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

Selector: upload-url
Type:

String

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