Your search did not match any results.

File Uploader - Async Upload

In this demo, the FileUploader component is configured for asynchronous upload. Use the File types drop-down menu to select acceptable file types for the Open file dialog. The Upload mode drop-down menu allows you to specify whether the file is uploaded on a button click or instantly after the file has been selected. In addition, you can specify whether the FileUploader allows multiple file selection.

Backend API
<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[] { new { name = "All types", value = "*" }, new { name = "Images", value = "image/*" }, new { name = "Videos", value = "video/*" } }) .ValueExpr("value") .InputAttr("aria-label", "File Type") .DisplayExpr("name") .Value("*") .OnValueChanged("acceptOption_changed") ) </div> <div class="option"> <span>Upload mode</span> @(Html.DevExtreme().SelectBox() .DataSource(new[] { "instantly", "useButtons" }) .Value("instantly") .InputAttr("aria-label", "Mode") .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 DevExtreme.MVC.Demos.Models.FileUploader; using System; using System.IO; using System.Linq; using System.Net; using System.Text.Json; using System.Web; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class FileUploaderController : Controller { public ActionResult FileUploading() { return View(); } [HttpPost] public ActionResult Upload() { var file = Request.Files["myFile"]; try { // Write code that saves the 'file' file. // Don't rely on or trust the FileName property without validation } catch { return new HttpStatusCodeResult(HttpStatusCode.BadRequest); } 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; }

To select files, click the Select file button or drop the files directly on the component. If the upload mode is «useButtons», you must click the Upload button or a corresponding button for each file to initiate upload.

NOTE

This demo does not actually upload files. To upload files, assign the URL of a page providing server scenarios for saving uploaded files to the uploadUrl configuration property of the component.