RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxFileUploader/Configuration/ below:

Vue FileUploader Props | Vue Documentation

An object defining configuration properties for the FileUploader UI component.

A function that cancels the file upload.

Selector: abort-upload

Function parameters:

The file that is uploaded.

Information about the file upload session.

jQuery

$(function() {
    $("#file-uploader").dxFileUploader({
        abortUpload: function(file, uploadInfo) {
            // your code
        }
    });      
});

Angular

<dx-file-uploader ...
    [abortUpload]="fileUploader_abortUpload">
</dx-file-uploader>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // Uncomment the following lines if the function should be executed in the component's context
    // constructor() {
    //     this.fileUploader_abortUpload = this.fileUploader_abortUpload.bind(this);
    // }

    fileUploader_abortUpload(file, uploadInfo) {
        // ...
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxFileUploaderModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxFileUploaderModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

<template>
    <DxFileUploader ...
        :abort-upload="fileUploader_abortUpload"
    />
</template>

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

import DxFileUploader from 'devextreme-vue/file-uploader';

export default {
    components: {
        DxFileUploader
    },
    methods: {
        fileUploader_abortUpload(file, uploadInfo) {
            // ...
        }
    }
}
</script>

React

import React from 'react';

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

import FileUploader from 'devextreme-react/file-uploader';

class App extends React.Component {
    // Uncomment the following lines if the function should be executed in the component's context
    // constructor(props) {
    //     super(props);
    //     this.fileUploader_abortUpload = this.fileUploader_abortUpload.bind(this);
    // }

    fileUploader_abortUpload(file, uploadInfo) {
        // ...
    }

    render() {
        return (
            <FileUploader ...
                abortUpload={this.fileUploader_abortUpload}
            />
        );
    }
}
export default App;

ASP.NET Core Controls

@(Html.DevExtreme().FileUploader()
    @* ... *@
    .AbortUpload("abortUpload")
)

<script type="text/javascript">
    function abortUpload(file, uploadInfo) {
        // ...
    }
</script>

ASP.NET MVC Controls

@(Html.DevExtreme().FileUploader()
    @* ... *@
    .AbortUpload("abortUpload")
)

<script type="text/javascript">
    function abortUpload(file, uploadInfo) {
        // ...
    }
</script>

Specifies file types users can select in the Open File dialog. The default value accepts all file types.

FileUploader passes the value of this property to the accept attribute of the underlying input element. Utilize MIME types or file extensions separated by commas. Examples include:

image/* - only image files
image/png, image/jpg or .png, .jpg - only PNG and JPG images
image/png or .png - only PNG images

Refer to the documentation of the accept attribute for further information on available values.

If you pass a value that the component's underlying input element cannot parse, the Open File dialog will accept all file types.
The allowedFileExtensions property prevents prohibited file types from uploading, but does not restrict them in the Open File dialog. To filter file types in the Open File dialog, you must define the accept option.

View Demo

Specifies the shortcut key that sets focus on the UI component.

Selector: access-key

Default Value: undefined

The value of this property will be passed to the accesskey attribute of the HTML element that underlies the UI component.

Specifies whether the UI component changes its visual state as a result of user interaction.

Selector: active-state-enabled

Default Value: false

The UI component switches to the active state when users press down the primary mouse button. When this property is set to true, the CSS rules for the active state apply. You can change these rules to customize the component.

Use this property when you display the component on a platform whose guidelines include the active state change for UI components.

Specifies if an end user can remove a file from the selection and interrupt uploading.

Selector: allow-canceling

Default Value: true

If this property is set to true, a cancel button is displayed for each selected file.

This property applies only if the

uploadMode

not

set to

"useForm"

Restricts file extensions that can be uploaded to the server.

Selector: allowed-file-extensions

Default Value: []

View Demo

Note that the allowedFileExtensions property disables the uploading of the prohibited file types, but does not restrict these file types in the Open File dialog. To filter file types in the Open File dialog, use the accept option.

Specifies the chunk size in bytes. Applies only if uploadMode is "instantly" or "useButtons". Requires a server that can process file chunks.

Selector: chunk-size

Default Value: 0

View Demo

Set this property to a positive value to enable chunk upload. The UI component should be configured as described in the Chunk Upload article. When chunk upload is enabled, the FileUploader sends several multipart/form-data requests with information about the file and chunk. The "chunkMetadata" parameter contains chunk details as a JSON object of the following structure:

{
    "FileGuid": string,   
    "FileName": string,   
    "FileType": string,   
    "FileSize": long,
    "Index": long,        // The chunk's index
    "TotalCount": long,   // The file's total chunk count
}

See Also

Server-Side Implementation: ASP.NET | PHP

Specifies the HTML element which invokes the file upload dialog.

Selector: dialog-trigger

Default Value: undefined

View Demo

This property accepts one of the following values:

A CSS selector, or a jQuery selector if you use jQuery

jQuery

$(function(){
    $("#fileUploaderContainer").dxFileUploader({
        // ...
        dialogTrigger: '.open-button'
    });
});

Angular

<dx-file-uploader ... 
    dialogTrigger=".open-button"
>
</dx-file-uploader>

Vue

<template>
    <DxFileUploader ... 
        dialog-trigger=".open-button"
    >
    </DxFileUploader>
</template>
<script>
import { DxFileUploader } from 'devextreme-vue/file-uploader';

export default {
    components: {
        DxFileUploader
    }
};
</script>

React

import FileUploader from 'devextreme-react/file-uploader';
// ...
function App() {
    return (
        <FileUploader ... 
            dialogTrigger=".open-button"
        >
        </FileUploader>
    );
}

A jQuery wrapper

jQuery

$(function(){
    $("#fileUploaderContainer").dxFileUploader({
        // ...
        dialogTrigger: $('.open-button')
    });
});

A DOM element

jQuery

$(function(){
    $("#fileUploaderContainer").dxFileUploader({
        // ...
        dialogTrigger: document.querySelector('.open-button')
    });
});

Angular

<dx-file-uploader ... 
    [dialogTrigger]="targetElement"
>
</dx-file-uploader>

// ...
export class AppComponent {
    targetElement: Element;
    constructor() {
        this.targetElement = document.querySelector('.open-button') as Element;
    }
}

Vue

<template>
    <DxFileUploader ... 
        :dialog-trigger="targetElement"
    >
    </DxFileUploader>
</template>
<script>
import { DxFileUploader } from 'devextreme-vue/file-uploader';

export default {
    components: {
        DxFileUploader
    },
    data() {
        return {
            targetElement: null
        }
    },
    mounted() {
        this.targetElement = document.querySelector('.open-button');
    }
};
</script>

React

import React, { useEffect, useState } from 'react';
import FileUploader from 'devextreme-react/file-uploader';
// ...
function App() {
    const [targetElement, setTargetElement] = useState(null);
    useEffect(() => {
        setTargetElement(document.querySelector('.open-button'));
    }, []);
    return (
        <FileUploader ... 
            dialogTrigger={targetElement}
        >
        </FileUploader>
    );
}

Specifies whether the UI component responds to user interaction.

Specifies the HTML element in which users can drag and drop files for upload.

Selector: drop-zone

Default Value: undefined

View Demo

This property accepts one of the following values:

A CSS selector, or a jQuery selector if you use jQuery

jQuery

$(function(){
    $("#fileUploaderContainer").dxFileUploader({
        // ...
        dropZone: '.test-div'
    });
});

Angular

<dx-file-uploader ... 
    dropZone=".test-div"
>
</dx-file-uploader>

Vue

<template>
    <DxFileUploader ... 
        drop-zone=".test-div"
    >
    </DxFileUploader>
</template>
<script>
import { DxFileUploader } from 'devextreme-vue/file-uploader';

export default {
    components: {
        DxFileUploader
    }
};
</script>

React

import FileUploader from 'devextreme-react/file-uploader';
// ...
function App() {
    return (
        <FileUploader ... 
            dropZone=".test-div"
        >
        </FileUploader>
    );
}

A jQuery wrapper

jQuery

$(function(){
    $("#fileUploaderContainer").dxFileUploader({
        // ...
        dropZone: $('.test-div')
    });
});

A DOM element

jQuery

$(function(){
    $("#fileUploaderContainer").dxFileUploader({
        // ...
        dropZone: document.querySelector('.test-div')
    });
});

Angular

<dx-file-uploader ... 
    [dropZone]="targetElement"
>
</dx-file-uploader>

// ...
export class AppComponent {
    targetElement: Element;
    constructor() {
        this.targetElement = document.querySelector('.test-div') as Element;
    }
}

Vue

<template>
    <DxFileUploader ... 
        :drop-zone="targetElement"
    >
    </DxFileUploader>
</template>
<script>
import { DxFileUploader } from 'devextreme-vue/file-uploader';

export default {
    components: {
        DxFileUploader
    },
    data() {
        return {
            targetElement: null
        }
    },
    mounted() {
        this.targetElement = document.querySelector('.test-div');
    }
};
</script>

React

import React, { useEffect, useState } from 'react';
import FileUploader from 'devextreme-react/file-uploader';
// ...
function App() {
    const [targetElement, setTargetElement] = useState(null);
    useEffect(() => {
        setTargetElement(document.querySelector('.test-div'));
    }, []);
    return (
        <FileUploader ... 
            dropZone={targetElement}
        >
        </FileUploader>
    );
}

A custom drop zone (

dropZone

property) is not supported in

useForm upload modes

See Also

Specifies the global attributes to be attached to the UI component's container element.

Selector: DxElementAttr

Default Value: {}

jQuery

$(function(){
    $("#fileUploaderContainer").dxFileUploader({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

Angular

<dx-file-uploader ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-file-uploader>

import { DxFileUploaderModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFileUploaderModule
    ],
    // ...
})

Vue

<template>
    <DxFileUploader ...
        :element-attr="fileUploaderAttributes">
    </DxFileUploader>
</template>

<script>
import DxFileUploader from 'devextreme-vue/file-uploader';

export default {
    components: {
        DxFileUploader
    },
    data() {
        return {
            fileUploaderAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

React

import React from 'react';

import FileUploader from 'devextreme-react/file-uploader';

class App extends React.Component {
    fileUploaderAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <FileUploader ...
                elementAttr={this.fileUploaderAttributes}>
            </FileUploader>
        );
    }
}
export default App;

Specifies whether the UI component can be focused using keyboard navigation.

Selector: focus-state-enabled

Default Value: true (desktop)

Specifies the UI component's height.

This property accepts a value of one of the following types:

Number
The height in pixels.
String
A CSS-accepted measurement of height. For example, "55px", "20vh", "80%", "inherit".

Specifies text for a hint that appears when a user pauses on the UI component.

Specifies whether the FileUploader component changes the state of all its buttons when users hover over them.

Selector: hover-state-enabled

Default Value: true

Specifies the attributes to be passed on to the underlying <input> element of the file type.

Selector: input-attr

Type: any

Default Value: {}

jQuery

$(function(){
    $("#fileUploaderContainer").dxFileUploader({
        // ...
        inputAttr: {
            id: "inputId"
        }
    });
});

Angular

<dx-file-uploader ...
    [inputAttr]="{ id: 'inputId' }">
</dx-file-uploader>

import { DxFileUploaderModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFileUploaderModule
    ],
    // ...
})

Vue

<template>
    <DxFileUploader
        :input-attr="inputAttr"
    />
</template>

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

import DxFileUploader from 'devextreme-vue/file-uploader';

export default {
    components: {
        DxFileUploader
    },
    data() {
        return {
            inputAttr: { id: 'inputId' }
        }
    }
}
</script>

React

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

import FileUploader from 'devextreme-react/file-uploader';

const inputAttr = { id: 'inputId' };

export default function App() {
    return (
        <FileUploader
            inputAttr={inputAttr}
        />
    );
}

ASP.NET MVC Controls

@(Html.DevExtreme().FileUploader()
    .InputAttr("id", "inputId")
    // ===== or =====
    .InputAttr(new {
        @id = "inputId"
    })
    // ===== or =====
    .InputAttr(new Dictionary<string, object>() {
        { "id", "inputId" }
    })
)

@(Html.DevExtreme().FileUploader() _
    .InputAttr("id", "inputId")
    ' ===== or =====
    .InputAttr(New With {
        .id = "inputId"
    })
    ' ===== or =====
    .InputAttr(New Dictionary(Of String, Object) From {
        { "id", "inputId" }
    })
)

The text displayed when the extension of the file being uploaded is not an allowed file extension.

Selector: invalid-file-extension-message

Default Value: 'File type is not allowed'

The text displayed when the size of the file being uploaded is greater than the maxFileSize.

Selector: invalid-max-file-size-message

Default Value: 'File is too large'

The text displayed when the size of the file being uploaded is less than the minFileSize.

Selector: invalid-min-file-size-message

Default Value: 'File is too small'

Specifies whether the component's current value differs from the initial value.

Selector: is-dirty

Default Value: false

This property is a read-only flag. You can use it to check if the editor value changed.

jQuery

$(() => {
    const fileUploader = $('#fileUploader').dxFileUploader({
        // ...
    }).dxFileUploader('instance');

    $('#button').dxButton({
        // ...
        onClick () {
            if (fileUploader.option('isDirty')) {
                DevExpress.ui.notify("Do not forget to save changes", "warning", 500);
            }
        }
    });
});

Angular

import { Component, ViewChild } from '@angular/core';
import { DxFileUploaderComponent, DxButtonModule } from 'devextreme-angular';
import notify from 'devextreme/ui/notify';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    @ViewChild('fileUploaderRef', { static: false }) fileUploader: DxFileUploaderComponent;

    onClick () {
        if (this.fileUploader.instance.option('isDirty')) {
            notify("Do not forget to save changes", "warning", 500);
        }
    }
}

<dx-file-uploader ... 
    #fileUploaderRef
>
</dx-file-uploader>
<dx-button ...
    (onClick)="onClick($event)"
>
</dx-button>

Vue

<template>
    <DxFileUploader ...
        :ref="fileUploaderRef"
    >
    </DxFileUploader>
    <DxButton ...
        @click="onClick"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import DxFileUploader from 'devextreme-vue/file-uploader';
import DxButton from 'devextreme-vue/button';
import notify from 'devextreme/ui/notify';

export default {
    components: {
        DxFileUploader,
        DxButton
    },

    data() {
        return {
            fileUploaderRef
        }
    },

    methods: {
        onClick () {
            if (this.fileUploader.option('isDirty')) {
                notify("Do not forget to save changes", "warning", 500);
            }
        }
    },

    computed: {
        fileUploader: function() {
            return this.$refs[fileUploaderRef].instance;
        }
    }
}
</script>

React

import React, { useRef } from 'react';
import FileUploader from 'devextreme-react/file-uploader';
import Button from 'devextreme-react/button';
import 'devextreme/dist/css/dx.light.css';

const App = () => {
    const fileUploaderRef = useRef(null);

    const onClick = () => {
        if (this.fileUploaderRef.current.instance().option('isDirty')) {
            notify("Do not forget to save changes", "warning", 500);
        }
    };

    return (
        <FileUploader ...
            ref={fileUploaderRef}
        >
        </FileUploader>
        <Button ...
            onClick={onClick}
        />
    );
};

export default App;

See Also

reset

Specifies the text displayed on the area to which an end user can drop a file.

Selector: label-text

Default Value: 'or Drop file here', '' (mobile devices)

Specifies the maximum file size (in bytes) allowed for uploading. Applies only if uploadMode is "instantly" or "useButtons".

Selector: max-file-size

Default Value: 0

View Demo

Specifies the minimum file size (in bytes) allowed for uploading. Applies only if uploadMode is "instantly" or "useButtons".

Selector: min-file-size

Default Value: 0

Specifies whether the UI component enables an end user to select a single file or multiple files.

Specifies the value passed to the name attribute of the underlying input element. Required to access uploaded files on the server.

This property's value should end with square brackets if the

uploadMode

"useForm"

. Refer to the

Upload Mode

topic for an example.

See Also

Server-Side Implementation in ASP.NET | PHP

A function that allows you to customize the request before it is sent to the server.

Selector: @before-send

Function parameters:

Information about the event.

Object structure:

Default Value: null

jQuery

$(function() {
    $("#fileUploaderContainer").dxFileUploader({
        // ...
        onBeforeSend: function(e) {
            e.request.withCredentials = true;
        }
    });
});

Angular

<dx-file-uploader 
    (onBeforeSend)="onBeforeSend($event)">
    <!-- ... -->
</dx-file-uploader>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    onBeforeSend(e){
        e.request.withCredentials = true;
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxFileUploaderModule } from 'devextreme-angular';

@NgModule({
    imports: [
        DxFileUploaderModule
    ],        
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

<template>
    <DxFileUploader 
        :on-before-send="onBeforeSend" >            
    </DxFileUploader>
</template>

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

    import { 
        DxFileUploader
        // ... 
    } from 'devextreme-vue/file-uploader';

    export default {
        components: { 
            DxFileUploader
            // ... 
        },
        methods: {
            onBeforeSend(e) {
                e.request.withCredentials = true;
            }
        },         
        data() {
            return {
                //...
            };
        } 
    };
</script>

React

import React from 'react';
import FileUploader from 'devextreme-react/file-uploader';

const App = () => {
    const onBeforeSend = (e) => {
        e.request.withCredentials = true;
    };

    return (
        <FileUploader onBeforeSend={onBeforeSend}>
            <!-- ... -->               
        </FileUploader>
    );
};

export default App;

ASP.NET MVC Controls

@(Html.DevExtreme().FileUploader()
    .OnBeforeSend("onBeforeSend");
    // ...
)

<script>
    function onBeforeSend(e) {
        e.request.withCredentials = true;
    }
</script>

ASP.NET Core Controls

@(Html.DevExtreme().FileUploader()
    .OnBeforeSend("onBeforeSend");
    // ...
)

<script>
    function onBeforeSend(e) {
        e.request.withCredentials = true;
    }
</script>

A function that is executed when the UI component is rendered and each time the component is repainted.

Selector: @content-ready

Function parameters:

Information about the event.

Object structure:

Default Value: null

A function that is executed before the UI component is disposed of.

Selector: @disposing

Function parameters:

Information about the event.

Object structure:

Default Value: null

A function that is executed when the mouse enters a drop zone while dragging a file.

Selector: @drop-zone-enter

Function parameters:

Information about the event.

Object structure:

Default Value: null

A function that is executed when the mouse leaves a drop zone as it drags a file.

Selector: @drop-zone-leave

Function parameters:

Information about the event.

Object structure:

Default Value: null

A function that is executed when the file upload process is complete.

Selector: @files-uploaded

Function parameters:

Information about the event.

Object structure:

Default Value: null

jQuery

$(function() {
    $("#fileUploaderContainer").dxFileUploader({
        // ...
        onFilesUploaded: function(e) {
            // Your code goes here
        }
    });
});

Angular

<dx-file-uploader 
    (onFilesUploaded)="onFilesUploaded($event)">
    <!-- ... -->
</dx-file-uploader>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    onFilesUploaded(e){
        // ...
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxFileUploaderModule } from 'devextreme-angular';

@NgModule({
    imports: [
        DxFileUploaderModule
    ],        
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

<template>
    <DxFileUploader 
        :on-files-uploaded="onFilesUploaded" >            
    </DxFileUploader>
</template>

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

    import { 
        DxFileUploader
        // ... 
    } from 'devextreme-vue/file-uploader';

    export default {
        components: { 
            DxFileUploader
            // ... 
        },
        methods: {
            onFilesUploaded(e) {
                // ...
            }
        },         
        data() {
            return {
                //...
            };
        } 
    };
</script>

React

import React from 'react';
import FileUploader from 'devextreme-react/file-uploader';

const App = () => {
    const onFilesUploaded = (e) => {
        // ...
    };

    return (
        <FileUploader onFilesUploaded={onFilesUploaded}>
            <!-- ... -->               
        </FileUploader>
    );
};

export default App;

ASP.NET MVC Controls

@(Html.DevExtreme().FileUploader()
    .OnFilesUploaded("onFilesUploaded");
    // ...
)

<script>
    function onFilesUploaded(e) {
        // ...
    }
</script>

ASP.NET Core Controls

@(Html.DevExtreme().FileUploader()
    .OnFilesUploaded("onFilesUploaded");
    // ...
)

<script>
    function onFilesUploaded(e) {
        // ...
    }
</script>

A function used in JavaScript frameworks to save the UI component instance.

Selector: @initialized

Function parameters:

Information about the event.

Object structure:

Default Value: null

Angular

<dx-file-uploader ...
    (onInitialized)="saveInstance($event)">
</dx-file-uploader>

import { Component } from "@angular/core";
import FileUploader from "devextreme/ui/data_grid";
// ...
export class AppComponent {
    fileUploaderInstance: FileUploader;
    saveInstance (e) {
        this.fileUploaderInstance = e.component;
    }
}

Vue

App.vue (Composition API)

<template>
    <div>
        <DxFileUploader ...
            @initialized="saveInstance">
        </DxFileUploader>
    </div>
</template>

<script>
import DxFileUploader from 'devextreme-vue/file-uploader';

export default {
    components: {
        DxFileUploader
    },
    data: function() {
        return {
            fileUploaderInstance: null
        };
    },
    methods: {
        saveInstance: function(e) {
            this.fileUploaderInstance = e.component;
        }
    }
};
</script>

<template>
    <div>
        <DxFileUploader ...
            @initialized="saveInstance">
        </DxFileUploader>
    </div>
</template>

<script setup>
import DxFileUploader from 'devextreme-vue/file-uploader';

let fileUploaderInstance = null;

const saveInstance = (e) => {
    fileUploaderInstance = e.component;
}
</script>

React

import FileUploader from 'devextreme-react/file-uploader';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.saveInstance = this.saveInstance.bind(this);
    }

    saveInstance(e) {
        this.fileUploaderInstance = e.component;
    }

    render() {
        return (
            <div>
                <FileUploader onInitialized={this.saveInstance} />
            </div>
        );
    }
}

See Also

uploadFailedMessage

A function that is executed when the file upload is started.

Selector: @upload-started

Function parameters:

Information about the event.

Object structure:

Default Value: null

Note that the onUploadStarted function is not in effect if you use FileUploader in useForm upload mode or call the form.submit method.

A function that is executed when one or several files are added to or removed from the selection.

Selector: @value-changed

Function parameters:

Information about the event.

Object structure:

Default Value: null

The following code snippet demonstrates how to add image previews before uploading. It uses File API to get image details and create a thumbnail.

jQuery

<div id="fileUploader"></div>
<div id="list">

$(function () {
    function previewImages(file) {
        const reader = new FileReader();
        reader.onload = (function (theFile) {
            return function (e) {
                const span = $("<span>");
                span.html(
                    [
                        '<img class="thumb" src="',
                        e.target.result,
                        '" title="',
                        escape(theFile.name),
                        '"/>'
                    ].join("")
                );
                $("#list").append(span);
            };
        })(file);
        reader.readAsDataURL(file);
    }

    const fileUploader = $("#fileUploader").dxFileUploader({
        accept: "image/*",
        uploadMode: "useButtons",
        multiple: true,
        onValueChanged: function (args) {
            const files = args.value;
            $("#list").html("");
            if (files.length == 0) return;
            for (let i = 0; i < files.length; i+=1) {
                const file = files[i];
                previewImages(file);
            }
        }
    }).dxFileUploader("instance");
});

.thumb {
    height: 150px;
    max-width: 150px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
}

Angular

<dx-file-uploader
    [multiple]="true"
    uploadMode="useButtons"
    accept="image/*"
    (onValueChanged)="onFileSelected($event)"
>
</dx-file-uploader>
<div id="list">
    <span *ngFor="let image of imagePreviews">
        <img class="thumb" [src]="image.src" [title]="image.name" />
    </span>
</div>

import { DxFileUploaderTypes } from 'devextreme-angular/file-uploader';
// ...
export class AppComponent {
    imagePreviews: { src: string; name: string }[] = [];

    onFileSelected(e: DxFileUploaderTypes.ValueChangedEvent) {
        const input = e.value;
        this.imagePreviews = [];
        input.forEach((file) => {
            const reader = new FileReader();
            reader.onload = () => {
                this.imagePreviews.push({
                    src: reader.result as string,
                    name: file.name,
                });
            };
            reader.readAsDataURL(file);
        });
    }
}

.thumb {
    height: 150px;
    max-width: 150px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
}

Vue

<template>
    <DxFileUploader
        :multiple="true"
        accept="image/*"
        upload-mode="useButtons"
        @value-changed="onFileSelected"
    />
    <div id="list">
        <span v-for="(image, index) in imagePreviews" :key="index">
        <img class="thumb" :src="image.src" :title="image.name" />
        </span>
    </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import DxFileUploader from "devextreme-vue/file-uploader";
import type { DxFileUploaderTypes } from "devextreme-vue/file-uploader";

interface ImagePreview {
    src: string;
    name: string;
}

const imagePreviews = ref<ImagePreview[]>([]);

const onFileSelected = (e: DxFileUploaderTypes.ValueChangedEvent) => {
    const input = e.value;
    imagePreviews.value = [];
    input.forEach((file) => {
        const reader = new FileReader();
        reader.onload = () => {
            imagePreviews.value.push({
                src: reader.result as string,
                name: file.name,
            });
        };
        reader.readAsDataURL(file);
    });
};
</script>
<style>
.thumb {
    height: 150px;
    max-width: 150px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
}
</style>

React

import React, { useCallback, useState } from "react";
import FileUploader, { FileUploaderTypes } from "devextreme-react/file-uploader";

interface ImagePreview {
    src: string;
    name: string;
}

export default function App() {
    const [imagePreviews, setImagePreviews] = useState<ImagePreview[]>([]);
    const onFileSelected = useCallback((e: FileUploaderTypes.ValueChangedEvent) => {
        const input = e.value;
        setImagePreviews([]);
        input.forEach((file) => {
            const reader = new FileReader();
            reader.onload = () => {
                setImagePreviews((prevImages) => [
                    ...prevImages,
                    { src: reader.result, name: file.name },
                ]);
            };
            reader.readAsDataURL(file);
        });
    }, []);
    return (
        <div>
            <FileUploader
                multiple={true}
                uploadMode="useButtons"
                accept="image/*"
                onValueChanged={onFileSelected}
            />
            <div id="list">
                {imagePreviews.map((image, index) => (
                <span key={index}>
                    <img
                    className="thumb"
                    src={image.src}
                    title={image.name}
                    alt={image.name}
                    />
                </span>
                ))}
            </div>
        </div>
    );
}

.thumb {
    height: 150px;
    max-width: 150px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
}

For details on how to retrieve file data after uploading, refer to the following demo:

View Demo

Gets the current progress in percentages.

Specifies whether the editor is read-only.

Selector: read-only

Default Value: false

Set the readOnly property to true to enable the following functionality:

File upload in UI is disabled. This also includes a HTML element specified in the dialogTrigger property.
Built-in action buttons are disabled.

Note that already selected files are available for upload in readOnly mode.

The message displayed by the UI component when it is ready to upload the specified files.

Selector: ready-to-upload-message

Default Value: 'Ready to upload'

This property makes sense only if the uploadMode property is set to "useButtons".

Switches the UI component to a right-to-left representation.

Selector: rtl-enabled

Default Value: false

When this property is set to true, the UI component text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

DevExpress.config({
    rtlEnabled: true
});

DataGrid Demo Navigation UI Demo Editors Demo

The text displayed on the button that opens the file browser.

Selector: select-button-text

Default Value: 'Select File'

Specifies whether or not the UI component displays the list of selected files.

Selector: show-file-list

Default Value: true

Specifies the number of the element when the Tab key is used for navigating.

Selector: tab-index

Default Value: 0

The value of this property will be passed to the tabindex attribute of the HTML element that underlies the UI component.

The message displayed by the UI component when the file upload is cancelled.

Selector: upload-aborted-message

Default Value: 'Upload cancelled'

This property is only available if the uploadMode property is set to "instantly".

The text displayed on the button that starts uploading.

Selector: upload-button-text

Default Value: 'Upload'

The property makes sense only if the uploadMode property is set to "useButtons" or "instantly".

A function that uploads a file in chunks.

Selector: upload-chunk

Function parameters:

The file that is uploaded.

Information about the file upload session.

jQuery

$(function() {
    $("#file-uploader").dxFileUploader({
        uploadChunk: function(file, uploadInfo) {
            // your code
        }
    });      
});

Angular

<dx-file-uploader ...
    [uploadChunk]="fileUploader_uploadChunk">
</dx-file-uploader>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // Uncomment the following lines if the function should be executed in the component's context
    // constructor() {
    //     this.fileUploader_uploadChunk = this.fileUploader_uploadChunk.bind(this);
    // }

    fileUploader_uploadChunk(file, uploadInfo) {
        // ...
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxFileUploaderModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxFileUploaderModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

<template>
    <DxFileUploader ...
        :upload-chunk="fileUploader_uploadChunk"
    />
</template>

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

import DxFileUploader from 'devextreme-vue/file-uploader';

export default {
    components: {
        DxFileUploader
    },
    methods: {
        fileUploader_uploadChunk(file, uploadInfo) {
            // ...
        }
    }
}
</script>

React

import React from 'react';

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

import FileUploader from 'devextreme-react/file-uploader';

class App extends React.Component {
    // Uncomment the following lines if the function should be executed in the component's context
    // constructor(props) {
    //     super(props);
    //     this.fileUploader_uploadChunk = this.fileUploader_uploadChunk.bind(this);
    // }

    fileUploader_uploadChunk(file, uploadInfo) {
        // ...
    }

    render() {
        return (
            <FileUploader ...
                uploadChunk={this.fileUploader_uploadChunk}
            />
        );
    }
}
export default App;

ASP.NET Core Controls

@(Html.DevExtreme().FileUploader()
    @* ... *@
    .UploadChunk("uploadChunk")
)

<script type="text/javascript">
    function uploadChunk(file, uploadInfo) {
        // ...
    }
</script>

ASP.NET MVC Controls

@(Html.DevExtreme().FileUploader()
    @* ... *@
    .UploadChunk("uploadChunk")
)

<script type="text/javascript">
    function uploadChunk(file, uploadInfo) {
        // ...
    }
</script>

Specifies custom data for the upload request.

Selector: upload-custom-data

Type: any

Default Value: {}

jQuery

$(function() {
    $("#fileUploaderContainer").dxFileUploader({
        // ...
        uploadCustomData: {
            __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value
        }
    });
});

Angular

<dx-file-uploader id="fileUploader">
    [uploadCustomData]="{
        __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value
    }"
    <!-- ... -->
</dx-file-uploader>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxFileUploaderModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxFileUploaderModule
    ],
    //...
})
export class AppModule { }

Vue

<template>
    <DxFileUploader
        :upload-custom-data="uploaderCustomData" >   
    </DxFileUploader>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';    

    import {
        DxFileUploader
    } from 'devextreme-vue/file-uploader';

    export default {
        components: {
            DxFileUploader
        },
        data() {
            return {
                uploaderCustomData: {
                    __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value
                }
            };
        }            
    };
</script>

React

import React from 'react';

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

import FileUploader from 'devextreme-react/file-uploader';

const uploaderCustomData = {
    __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value
};

class App extends React.Component {
    render() {
        return (
            <FileUploader uploadCustomData={uploaderCustomData} >
            </FileUploader>
        );
    }
}
export default App;

ASP.NET MVC Controls

@(Html.DevExtreme().FileUploader()
    .UploadCustomData(new JS("__RequestVerificationToken: document.getElementsByName('__RequestVerificationToken')[0].value"))
    // ...
)

ASP.NET Core Controls

@(Html.DevExtreme().FileUploader()
    .UploadCustomData(new JS("__RequestVerificationToken: document.getElementsByName('__RequestVerificationToken')[0].value"))
    // ...
)

The message displayed by the UI component when uploading is finished.

Selector: uploaded-message

Default Value: 'Uploaded'

The property makes sense only if the uploadMode property is set to "useButtons" or "instantly".

The message displayed by the UI component on uploading failure.

Selector: upload-failed-message

Default Value: 'Upload failed'

The property makes sense only if the uploadMode property is set to "useButtons" or "instantly".

A function that uploads a file.

Selector: upload-file

Event Handler Arguments:

The file that is uploaded.

A function that you should call to notify the UI component about the file upload progress.

jQuery

$(function() {
    $("#file-uploader").dxFileUploader({
        multiple: true,
        uploadFile: function(file, progressCallback) {
            // your code
            progressCallback(100);
            // ...
            progressCallback(200);
            // ...
        }
    });         
});

Angular

<dx-file-uploader ...
    [uploadFile]="fileUploader_uploadFile">
</dx-file-uploader>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // Uncomment the following lines if the function should be executed in the component's context
    // constructor() {
    //     this.fileUploader_uploadFile = this.fileUploader_uploadFile.bind(this);
    // }

    fileUploader_uploadFile(file, progressCallback) {
        // your code
        progressCallback(100);
        // ...
        progressCallback(200);
        // ...
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxFileUploaderModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxFileUploaderModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

<template>
    <DxFileUploader ...
        :upload-file="fileUploader_uploadFile"
    />
</template>

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

import DxFileUploader from 'devextreme-vue/file-uploader';

export default {
    components: {
        DxFileUploader
    },
    methods: {
        fileUploader_uploadFile(file, progressCallback) {
            // your code
            progressCallback(100);
            // ...
            progressCallback(200);
            // ...
        }
    }
}
</script>

React

import React from 'react';

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

import FileUploader from 'devextreme-react/file-uploader';

class App extends React.Component {
    // Uncomment the following lines if the function should be executed in the component's context
    // constructor(props) {
    //     super(props);
    //     this.fileUploader_uploadFile = this.fileUploader_uploadFile.bind(this);
    // }

    fileUploader_uploadFile(file, progressCallback) {
        // your code
        progressCallback(100);
        // ...
        progressCallback(200);
        // ...
    }

    render() {
        return (
            <FileUploader ...
                uploadFile={this.fileUploader_uploadFile}
            />
        );
    }
}
export default App;

ASP.NET Core Controls

@(Html.DevExtreme().FileUploader()
    @* ... *@
    .UploadFile("uploadFile")
)

<script type="text/javascript">
    function uploadFile(file, progressCallback) {
        // your code
        progressCallback(100);
        // ...
        progressCallback(200);
        // ...
    }
</script>

ASP.NET MVC Controls

@(Html.DevExtreme().FileUploader()
    @* ... *@
    .UploadFile("uploadFile")
)

<script type="text/javascript">
    function uploadFile(file, progressCallback) {
        // your code
        progressCallback(100);
        // ...
        progressCallback(200);
        // ...
    }
</script>

Specifies headers for the upload request.

Selector: upload-headers

Type: any

Default Value: {}

Specifies the method for the upload request.

Selector: upload-method

Default Value: 'POST'

The property makes sense only if the uploadMode property is set to "useButtons" or "instantly".

Specifies how the UI component uploads files.

Selector: upload-mode

Default Value: 'instantly'

View Demo

Depending on the uploadMode, the FileUploader UI component uses an HTML form or a FormData interface with a series of Ajax requests to upload files. The uploadMode property accepts one of the following values:

"instantly" (default)
Ajax upload. Files are uploaded after they are selected.
"useButtons"
Ajax upload. Files are uploaded after a user clicks the Upload button.
"useForm"
HTML form upload. Files are uploaded when the HTML form is submitted.

See Also

Upload Mode

Specifies a target Url for the upload request.

Selector: upload-url

Default Value: '/'

The property makes sense only if the uploadMode property is set to "useButtons" or "instantly".

View Demo

Information on the broken validation rule. Contains the first item from the validationErrors array.

Selector: validation-error

Type: any

Default Value: null

An array of validation errors.

Selector: validation-errors

Default Value: null

FileUploader updates this property automatically as it validates values. You can also update validationErrors manually to display custom errors and implement custom validation logic. The following code snippet demonstrates how to define items in this array:

jQuery

$('#file-uploader').dxFileUploader({
    isValid: false,
    validationErrors: [{ message: "Custom validation error" }],
})

Angular

<dx-file-uploader
    [isValid]="false"
    [validationErrors]="validationErrors"
></dx-file-uploader>

import { DxFileUploaderComponent } from 'devextreme-angular/ui/file-uploader'

export class AppComponent {
    validationErrors = [
        { message: 'Custom validation error' }
    ];
}

Vue

<script setup lang="ts">
import { DxFileUploader } from 'devextreme-vue/file-uploader';

const validationErrors = [
    { message: 'Custom validation error' }
];
</script>

<template>
    <DxFileUploader 
        :is-valid="false"
        :validation-errors="validationErrors"
    />
</template>

React

import { FileUploader } from 'devextreme-react/file-uploader';

const validationErrors = [
    { message: 'Custom validation error' }
];

function App(): JSX.Element {
    return (
        <FileUploader
            isValid={false}
            validationErrors={validationErrors}
        />
    )
}

Indicates or specifies the current validation status.

Selector: validation-status

Default Value: 'valid'

The following table illustrates the validation status indicators:

When you assign "invalid" to validationStatus, you can also use the validationErrors array to set an error message as shown below:

jQuery

$(function() {
    const fileUploader = $("#fileUploaderContainer").dxFileUploader({
        // ...
    }).dxFileUploader("instance");

    function setInvalidStatus(message) {
        fileUploader.option({
            validationStatus: "invalid",
            validationErrors: [{ message: message }]
        });
    }
});

Angular

<dx-file-uploader
    [validationStatus]="validationStatus"
    [validationErrors]="validationErrors">
</dx-file-uploader>

// ...
export class AppComponent {
    validationStatus: string = "valid";
    validationErrors: any;
    // ...
    setInvalidStatus(message) {
        this.validationStatus = "invalid";
        this.validationErrors = [{ message: message }];
    }
}

Vue

<template>
    <DxFileUploader ...
        :validation-status="validationStatus"
        :validation-errors="validationErrors"
    />
</template>

<script>
    // ...
    export default {
        // ...
        data() {
            return {
                validationStatus: "valid",
                validationErrors: []
            }
        },
        methods: {
            setInvalidStatus(message) {
                this.validationStatus = "invalid";
                this.validationErrors = [{ message: message }];
            }
        }
    }
</script>

React

import React, { useState } from 'react';
// ...

function App() {
    const [validationStatus, setValidationStatus] = useState("valid");
    const [validationErrors, setValidationErrors] = useState([]);

    const setInvalidStatus = message => {
        setValidationStatus("invalid");
        setValidationErrors([{ message: message }]);
    }

    return (
        <FileUploader
            validationStatus={validationStatus}
            validationErrors={validationErrors}
        />
    ); 

};
export default App;

Specifies whether the UI component is visible.

Specifies the UI component's width.

This property accepts a value of one of the following types:

Number
The width in pixels.
String
A CSS-accepted measurement of width. For example, "55px", "20vw", "80%", "auto", "inherit".

Feel free to share topic-related thoughts here. If you have technical questions, please create a support ticket in the DevExpress Support Center. Thank you for the feedback!

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4