00 Overview.md

The FileUploader UI component enables an end user to upload files to the server. An end user can select files in the file explorer or drag and drop files on the page's FileUploader area.

#include btn-open-demo with { href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileUploader/FileSelection/" }

The following code adds the FileUploader to your page. Use the accept property to restrict the file types that can be uploaded to the server. This property is like the underlying <input> element's "accept" attribute and accepts the same values described here.

---

jQuery

<!-- tab: index.html -->
<div id="fileUploaderContainer"></div>

<!-- tab: index.js -->
$(function() {
    $("#fileUploaderContainer").dxFileUploader({
        // ...
        accept: "image/*"
    });
});

Angular

<!-- tab: app.component.html -->
<dx-file-uploader ...
    accept="image/*">
</dx-file-uploader>

<!-- tab: app.component.ts -->
import { DxFileUploaderModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFileUploaderModule
    ],
    // ...
})

Vue

<!-- tab: App.vue -->
<template>
    <DxFileUploader
        accept="image/*" >   
    </DxFileUploader>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';    
    
    import {
        DxFileUploader
    } from 'devextreme-vue/file-uploader';

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

React

<!-- tab: App.js -->
import React from 'react';

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

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

function App() {
    return (
        <FileUploader accept="image/*" >
        </FileUploader>
    );
}
export default App;

---

A user can upload only one file at a time. Set the multiple property to true to allow users to upload several files at once.

---

jQuery

<!-- tab: index.js -->
$(function() {
    $("#fileUploaderContainer").dxFileUploader({
        multiple: true
    });
});

Angular

<!-- tab: app.component.html -->
<dx-file-uploader ...
    [multiple]="true">
</dx-file-uploader>

<!-- tab: app.component.ts -->
import { DxFileUploaderModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFileUploaderModule
    ],
    // ...
})

Vue

<!-- tab: App.vue -->
<template>
    <DxFileUploader
        :multiple="true" >   
    </DxFileUploader>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';    
    
    import {
        DxFileUploader
    } from 'devextreme-vue/file-uploader';

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

React

<!-- tab: App.js -->
import React from 'react';

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

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

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

---

---

jQuery

If you need to access the selected files at runtime, get the value of the value property. The following command returns an array, whose members are each an instance implementing the File interface.

<!-- tab: index.js -->
const files = $("#fileUploaderContainer").dxFileUploader("option", "value");

Angular

Bind the value property of the FileUploader UI component to a component property. After that, you can access the file array within any method.

<!-- tab: app.component.ts -->
import { DxFileUploaderModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
    value: any[] = [];
    getSelectedFiles () {
        return this.value;
    }
}
@NgModule({
    imports: [
        // ...
        DxFileUploaderModule
    ],
    // ...
})

<!-- tab: app.component.html -->
<dx-file-uploader ...
    [(value)]="value">
</dx-file-uploader>

Vue

Bind the value property of the FileUploader UI component to a component property. After that, you can access the file array within any method.

<!-- tab: App.vue -->
<template>
    <DxFileUploader ...
        v-model:value="value"
    />
    </div>
</template>

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

export default {
components: {
    DxFileUploader,
},
data() {
    return {
        value: []
    };
},
methods: {
    getSelectedFiles () {
        return this.value;
    }
},
};
</script>

React

Bind the value property of the FileUploader UI component to a component property. After that, you can access the file array within any method.

<!-- tab: App.js -->
import React, {useState} from 'react';
import FileUploader from 'devextreme-react/file-uploader';

function App() {
    const [value, setValue] = useState([]);
    const changeValue = (e) => {
        setValue(e.value);
    }
    const getSelectedFiles = () => {
        return value;
    }
    return (
        <FileUploader ...
            value={value}
            onValueChanged={changeValue}
        />
    );
}

export default App;

---

The FileUploader can operate in two different modes, each demanding a different client- and server-side configuration. See the Client-Side Settings article for more details.

#####See Also##### #include common-link-configurewidget

• Upload Files - Server Side: ASP.NET | PHP
• File Validation
• FileUploader API Reference

[tags]dxfileuploader, file uploader, fileUploader, overview, accepted file types, multiple files, access files in code