React FileUploader - Customize FileUploader

This tutorial demonstrates how to customize FileUploader appearance. The following live example demonstrates the result:

To integrate a custom FileUploader drop zone, specify the dropZone property. Create the component inside the drop zone container to place FileUploader in its drop zone:

<div class="file-uploader-block">
    <div id="file-uploader"></div>
</div>

$(() => {
    $('#file-uploader').dxFileUploader({
        dropZone: '.file-uploader-block',
    })
})

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

<template>
    <div class="file-uploader-block">
        <DxFileUploader drop-zone=".file-uploader-block" />
    </div>
</template>

export default function App() {
    return (
        <div class="file-uploader-block">
            <FileUploader dropZone=".file-uploader-block" />
        </div>
    )
}

Implement the following CSS styles to customize the FileUploader and its drop zone:

.file-uploader-block {
    width: 360px;
    height: 360px;
    background-color: #f5f5f5;
    border-radius: 16px;
}

#file-uploader {
    height: 100%;
}

.dx-fileuploader-content {
    display: grid;
    height: 100%;
    position: relative;
}

.dx-fileuploader-input-wrapper {
    place-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

Note the following styles:

• flex-direction: column: Rearranges the "Select a file" button and "or Drop a File Here" label vertically.
• place-self: center: Centers the button and label in the .dx-fileuploader-content grid container.

When users upload files, the component lists selected files in its container. To move this list below the FileUploader drop zone, specify absolute positioning and implement the following styles:

.dx-fileuploader-wrapper {
    overflow: visible;
}

.dx-fileuploader-show-file-list .dx-fileuploader-files-container {
    padding-top: 0;
}

.dx-fileuploader-files-container {
    position: absolute;
    top: calc(100% + 16px);
    left: 8px;
    right: 8px;
    width: auto;
    max-height: 180px;
    overflow-y: auto;
    box-sizing: border-box;
}

Note the following styles:

• top: calc(100% + 16px): Positions the uploaded file list container below the FileUploader.
• overflow-y: auto: Adds a scroll bar to the uploaded file list when necessary.

The component uploads selected files immediately when uploadMode is "instantly" (default). To allow users to select and upload files separately, set uploadMode 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:

.dx-fileuploader-content > .dx-fileuploader-upload-button {
    display: none;
}