<div id="fileuploader">
<div class="widget-container">
@(Html.DevExtreme().FileUploader()
.ID("file-uploader")
.Name("myFile")
.Multiple(false)
.Accept("*")
.UploadMode(FileUploadMode.Instantly)
.UploadUrl(Url.Action("Upload", "FileUploader"))
.OnValueChanged("fileUploader_valueChanged")
)
<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>
@(Html.DevExtreme().SelectBox()
.DataSource(new object[] {
new { name = "All types", value = "*" },
new { name = "Images", value = "image/*" },
new { name = "Videos", value = "video/*" }
})
.ValueExpr("value")
.DisplayExpr("name")
.Value("*")
.OnValueChanged("acceptOption_changed")
)
</div>
<div class="option">
<span>Upload mode</span>
@(Html.DevExtreme().SelectBox()
.DataSource(new string[] {
"instantly", "useButtons"
})
.Value("instantly")
.OnValueChanged("uploadMode_changed")
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Value(false)
.Text("Allow multiple files selection")
.OnValueChanged("multipleOption_changed")
)
</div>
</div>
</div>
<script>
function getFileUploaderInstance() {
return $("#file-uploader").dxFileUploader("instance");
}
function fileUploader_valueChanged(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();
}
function acceptOption_changed(e) {
getFileUploaderInstance().option("accept", e.value);
}
function uploadMode_changed(e) {
getFileUploaderInstance().option("uploadMode", e.value);
}
function multipleOption_changed(e) {
getFileUploaderInstance().option("multiple", e.value);
}
</script>
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Controllers {
public partial class FileUploaderController : Controller {
public ActionResult FileUploading() {
return View();
}
[HttpPost]
public ActionResult Upload() {
// Learn more on the functionality of the dxFileUploader widget at:
// http://js.devexpress.com/Documentation/Guide/UI_Widgets/UI_Widgets_-_Deep_Dive/dxFileUploader/
try {
var myFile = Request.Form.Files["myFile"];
var path = Path.Combine(_hostingEnvironment.WebRootPath, "uploads");
// Uncomment to save the file
//if(!Directory.Exists(path))
// Directory.CreateDirectory(path);
//using(var fileStream = System.IO.File.Create(Path.Combine(path, myFile.FileName))) {
// myFile.CopyTo(fileStream);
//}
} catch {
Response.StatusCode = 400;
}
return new EmptyResult();
}
}
}
.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;
}