Angular FileUploader Properties

abortUpload

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

accept

accessKey

activeStateEnabled

allowCanceling

allowedFileExtensions

chunkSize

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

disabled

elementAttr

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

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

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

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

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;

focusStateEnabled

height

hint

hoverStateEnabled

inputAttr

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

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

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

@(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" }
    })
)

invalidFileExtensionMessage

invalidMaxFileSizeMessage

invalidMinFileSizeMessage

isValid

labelText

maxFileSize

minFileSize

multiple

name

onContentReady

onDisposing

onInitialized

onOptionChanged

$(function() {
    $("#fileUploaderContainer").dxFileUploader({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

<dx-file-uploader ...
    (onOptionChanged)="handlePropertyChange($event)"> 
</dx-file-uploader>

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

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

export class AppComponent { 
    // ...
    handlePropertyChange(e) {
        if(e.name === "changedProperty") { 
            // handle the property change here
        }
    }
}

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

<template> 
    <DxFileUploader ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script> 
import 'devextreme/dist/css/dx.common.css'; 
import 'devextreme/dist/css/dx.light.css'; 
import DxFileUploader from 'devextreme-vue/file-uploader'; 

export default { 
    components: { 
        DxFileUploader
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script> 

import React from 'react'; 
import 'devextreme/dist/css/dx.common.css'; 
import 'devextreme/dist/css/dx.light.css'; 

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

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <FileUploader ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
} 

onProgress

onUploadAborted

onUploaded

onUploadError

$(function(){
    $("#fileUploader").dxFileUploader({
        // ...
        onUploadError: function(e){
            var xhttp = e.request;
            if (xhttp.readyState == 4 && xhttp.status == 0) {
                console.log("Connection refused.");
            }
        }
    });
});

export class AppComponent {
    handleNetworkError (e) {
        var xhttp = e.request;
        if (xhttp.readyState == 4 && xhttp.status == 0) {
            console.log("Connection refused.");
        }      
    }
}

<dx-file-uploader ...
    (onUploadError)="handleNetworkError($event)">
</dx-fileUploader>

onUploadStarted

onValueChanged

progress

readOnly

readyToUploadMessage

rtlEnabled

DevExpress.config({
    rtlEnabled: true
});

selectButtonText

showFileList

tabIndex

uploadButtonText

uploadChunk

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

uploadedMessage

uploadFailedMessage

uploadFile

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

uploadHeaders

uploadMethod

uploadMode

uploadUrl

validationError

validationErrors

validationStatus

The following table illustrates the validation status indicators:

validationStatus	Indicator
"pending"
"valid"
"invalid"

value

visible

width