window.onload = function () {
const ViewModel = function () {
const that = this;
that.multiple = ko.observable(false);
that.accept = ko.observable('*');
that.value = ko.observableArray();
that.uploadMode = ko.observable('instantly');
that.showUploadedFiles = ko.computed(
() => that.value().length > 0,
);
that.options = {
multiple: that.multiple,
accept: that.accept,
value: that.value,
uploadMode: that.uploadMode,
uploadUrl: 'https://js.devexpress.com/Demos/NetCore/FileUploader/Upload',
};
that.acceptOptions = {
dataSource: [
{ name: 'All types', value: '*' },
{ name: 'Images', value: 'image/*' },
{ name: 'Videos', value: 'video/*' },
],
valueExpr: 'value',
displayExpr: 'name',
value: that.accept,
};
that.uploadOptions = {
items: ['instantly', 'useButtons'],
value: that.uploadMode,
};
};
ko.applyBindings(new ViewModel(), document.getElementById('fileuploader'));
};
<!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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.2.3/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/22.2.3/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 data-bind="dxFileUploader: options">
</div>
<div class="content">
<div data-bind="if: showUploadedFiles">
<h4>Selected Files</h4>
</div>
<div data-bind="foreach: value">
<div class="selected-item">
Name:
<span data-bind="text: name"></span><br />
Size:
<span data-bind="text: size"></span>bytes<br />
Type:
<span data-bind="text: type"></span><br />
Last Modified Date:
<span data-bind="text: lastModifiedDate"></span>
</div>
</div>
</div>
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>File types</span>
<div data-bind="dxSelectBox: acceptOptions"></div>
</div>
<div class="option">
<span>Upload mode</span>
<div data-bind="dxSelectBox: uploadOptions"></div>
</div>
<div class="option">
<div data-bind="dxCheckBox: {value: multiple, text: 'Allow multiple files selection'}"></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;
}