Angular FileUploader - Customize FileUploader

This tutorial demonstrates how to customize FileUploader appearance.

Specify the dropZone property to integrate a custom drop zone. Use the width and height CSS styles to modify drop zone dimensions. This tutorial also implements the background-color and border-radius styles:

jQuery
index.html
index.js
styles.css
<div class="file-uploader-block"></div>
<div id="file-uploader"></div>
$(() => {
    $('#file-uploader').dxFileUploader({
        dropZone: '.file-uploader-block',
    })
})
.file-uploader-block {
    width: 350px;
    height: 200px;
    background-color: #f5f5f5;
    border-radius: 16px;
}
Angular
app.component.html
app.component.css
<div class="file-uploader-block"></div>
<dx-file-uploader dropZone=".file-uploader-block"></dx-file-uploader>
.file-uploader-block {
    width: 350px;
    height: 200px;
    background-color: #f5f5f5;
    border-radius: 16px;
}
Vue
App.vue
styles.css
<template>
    <div class="file-uploader-block"></div>
    <DxFileUploader drop-zone=".file-uploader-block" />
</template>
.file-uploader-block {
    width: 350px;
    height: 200px;
    background-color: #f5f5f5;
    border-radius: 16px;
}
React
App.tsx
styles.css
export default function App() {
    return (
        <div class="file-uploader-block"></div>
        <FileUploader dropZone=".file-uploader-block" />
    )
}
.file-uploader-block {
    width: 350px;
    height: 200px;
    background-color: #f5f5f5;
    border-radius: 16px;
}

This tutorial places the FileUploader inside a custom drop zone container:

jQuery
index.html
index.js
<div class="file-uploader-block">
    <div id="file-uploader"></div>
</div>
$(() => {
    $('#file-uploader').dxFileUploader({
        dropZone: '.file-uploader-block',
    })
})
Angular
app.component.html
<div class="file-uploader-block">
    <dx-file-uploader dropZone=".file-uploader-block"></dx-file-uploader>
</div>
Vue
App.vue
<template>
    <div class="file-uploader-block">
        <DxFileUploader drop-zone=".file-uploader-block" />
    </div>
</template>
React
App.tsx
export default function App() {
    return (
        <div class="file-uploader-block">
            <FileUploader dropZone=".file-uploader-block" />
        </div>
    )
}

To center FileUploader elements inside the drop zone, assign the following CSS styles to the .dx-fileuploader-input-wrapper selector:

styles.css
.dx-fileuploader-input-wrapper {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

When users upload files, the component lists selected files in its container. To move this list, specify absolute positioning. Assign the following CSS styles to the .dx-fileuploader-files-container selector:

styles.css
.dx-fileuploader-files-container {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 35%;
    height: 30%;
    overflow-y: auto;
}

Note the following styles:

  • top: 70%: Positions the uploaded file list container below the FileUploader.
  • overflow-y: auto: Adds a scroll bar to the uploaded file list container when necessary.

The component's default behaviour is to upload selected files immediately. To allow users to select and upload files separately, set the uploadMode property to "useButtons". This creates multiple upload buttons in the FileUploader container:

  • Individual upload buttons for each item in the uploaded file list.
  • A common "Upload" button that uploads all files at once.

This tutorial hides the common "Upload" button using the following CSS style:

styles.css
.dx-fileuploader-content > .dx-fileuploader-upload-button {
    visibility: hidden;
}