$(function(){
var fileUploader = $("#file-uploader").dxFileUploader({
multiple: false,
accept: "*",
value: [],
uploadMode: "instantly",
uploadUrl: "https://js.devexpress.com/Demos/NetCore/FileUploader/Upload",
onValueChanged: function(e) {
var files = e.value;
if(files.length > 0) {
$("#selected-files .selected-item").remove();
$.each(files, function(i, file) {
var $selectedItem = $("<div />").addClass("selected-item");
$selectedItem.append(
$("<span />").html("Name: " + file.name + "<br/>"),
$("<span />").html("Size " + file.size + " bytes" + "<br/>"),
$("<span />").html("Type " + file.type + "<br/>"),
$("<span />").html("Last Modified Date: " + file.lastModifiedDate)
);
$selectedItem.appendTo($("#selected-files"));
});
$("#selected-files").show();
}
else
$("#selected-files").hide();
}
}).dxFileUploader("instance");
$("#accept-option").dxSelectBox({
dataSource: [
{name: "All types", value: "*"},
{name: "Images", value: "image/*"},
{name: "Videos", value: "video/*"}
],
valueExpr: "value",
displayExpr: "name",
value: "*",
onValueChanged: function(e) {
fileUploader.option("accept", e.value);
}
});
$("#upload-option").dxSelectBox({
items: ["instantly", "useButtons"],
value: "instantly",
onValueChanged: function(e) {
fileUploader.option("uploadMode", e.value);
}
});
$("#multiple-option").dxCheckBox({
value: false,
text: "Allow multiple files selection",
onValueChanged: function(e) {
fileUploader.option("multiple", e.value);
}
});
});
<!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.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.2.5/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 id="fileuploader">
<div class="widget-container">
<div id="file-uploader"></div>
<div class="content" id="selected-files">
<div>
<h4>Selected Files</h4>
</div>
</div>
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>File types</span>
<div id="accept-option"></div>
</div>
<div class="option">
<span>Upload mode</span>
<div id="upload-option"></div>
</div>
<div class="option">
<div id="multiple-option"></div>
</div>
</div>
</div>
</div>
</body>
</html>
.widget-container {
margin-right: 320px;
}
.content h4 {
margin-bottom: 10px;
font-weight: 500;
font-size: 18px;
}
.content {
margin-top: 50px;
margin-left: 10px;
}
.selected-item {
margin-bottom: 20px;
}
#selected-files {
display: none;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 260px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
}