$(function(){
$("#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: function(e) {
if(e.dropZoneElement.id === "dropzone-external")
toggleDropZoneActive(e.dropZoneElement, true);
},
onDropZoneLeave: function(e) {
if(e.dropZoneElement.id === "dropzone-external")
toggleDropZoneActive(e.dropZoneElement, false);
},
onUploaded: function(e) {
const file = e.file;
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: function(e) {
uploadProgressBar.option("value", e.bytesLoaded / e.bytesTotal * 100)
},
onUploadStarted: function() {
toggleImageVisible(false);
uploadProgressBar.option("visible", true);
}
});
var 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/20.2.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.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;
}