$(() => {
$('#file-uploader').dxFileUploader({
dialogTrigger: '#dropzone-external',
dropZone: '#dropzone-external',
multiple: false,
allowedFileExtensions: ['.jpg', '.jpeg', '.gif', '.png'],
uploadMode: 'instantly',
uploadUrl: 'https://js.devexpress.com/Demos/NetCore/FileUploader/Upload',
visible: false,
onDropZoneEnter(e) {
if (e.dropZoneElement.id === 'dropzone-external') { toggleDropZoneActive(e.dropZoneElement, true); }
},
onDropZoneLeave(e) {
if (e.dropZoneElement.id === 'dropzone-external') { toggleDropZoneActive(e.dropZoneElement, false); }
},
onUploaded(e) {
const { file } = e;
const dropZoneText = document.getElementById('dropzone-text');
const fileReader = new FileReader();
fileReader.onload = function () {
toggleDropZoneActive(document.getElementById('dropzone-external'), false);
const dropZoneImage = document.getElementById('dropzone-image');
dropZoneImage.src = fileReader.result;
};
fileReader.readAsDataURL(file);
dropZoneText.style.display = 'none';
uploadProgressBar.option({
visible: false,
value: 0,
});
},
onProgress(e) {
uploadProgressBar.option('value', (e.bytesLoaded / e.bytesTotal) * 100);
},
onUploadStarted() {
toggleImageVisible(false);
uploadProgressBar.option('visible', true);
},
});
const uploadProgressBar = $('#upload-progress').dxProgressBar({
min: 0,
max: 100,
width: '30%',
showStatus: false,
visible: false,
}).dxProgressBar('instance');
function toggleDropZoneActive(dropZone, isActive) {
if (isActive) {
dropZone.classList.add('dx-theme-accent-as-border-color');
dropZone.classList.remove('dx-theme-border-color');
dropZone.classList.add('dropzone-active');
} else {
dropZone.classList.remove('dx-theme-accent-as-border-color');
dropZone.classList.add('dx-theme-border-color');
dropZone.classList.remove('dropzone-active');
}
}
function toggleImageVisible(visible) {
const dropZoneImage = document.getElementById('dropzone-image');
dropZoneImage.hidden = !visible;
}
document.getElementById('dropzone-image').onload = function () { toggleImageVisible(true); };
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.2.6/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/22.2.6/js/dx.all.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div class="widget-container flex-box">
<span>Profile Picture</span>
<div id="dropzone-external" class="flex-box dx-theme-border-color">
<img id="dropzone-image" src="#" hidden alt="" />
<div id="dropzone-text" class="flex-box">
<span>Drag & Drop the desired file</span>
<span>…or click to browse for a file instead.</span>
</div>
<div id="upload-progress"></div>
</div>
<div id="file-uploader"></div>
</div>
</div>
</body>
</html>
#dropzone-external {
width: 350px;
height: 350px;
background-color: rgba(183, 183, 183, 0.1);
border-width: 2px;
border-style: dashed;
padding: 10px;
}
#dropzone-external > * {
pointer-events: none;
}
#dropzone-external.dropzone-active {
border-style: solid;
}
.widget-container > span {
font-size: 22px;
font-weight: bold;
margin-bottom: 16px;
}
#dropzone-image {
max-width: 100%;
max-height: 100%;
}
#dropzone-text > span {
font-weight: 100;
opacity: 0.5;
}
#upload-progress {
display: flex;
margin-top: 10px;
}
.flex-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}