Your search did not match any results.
File Uploader

File Selection

Documentation
The FileUploader widget allows an end user to upload files to the server. This demo illustrates the use of the FileUploader within a web page. To select a file using the Open file dialog, click the Select photo button. Note that the Open file dialog only accepts image file types as the accept configuration option of the FileUploader is set to "image/*".

IMPORTANT: This demo does not actually upload the selected file. To upload a file, submit the form. The form element should contain the action attribute, which holds the URL of the page providing server scenarios for saving uploaded files.
<form id="form" method="post" enctype="multipart/form-data"> <h3>Profile Settings</h3> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">First Name:</div> <div class="dx-field-value"> @(Html.DevExtreme().TextBox() .Name("FirstName") .Value("John") ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Last Name:</div> <div class="dx-field-value"> @(Html.DevExtreme().TextBox() .Name("LastName") .Value("Smith") ) </div> </div> </div> <div id="fileuploader-container"> @(Html.DevExtreme().FileUploader() .Name("Photo") .SelectButtonText("Select photo") .LabelText("") .Accept("image/*") .UploadMode(FileUploadMode.UseForm) ) </div> @(Html.DevExtreme().Button() .ID("button") .Text("Update profile") .Type(ButtonType.Success) .UseSubmitBehavior(true) ) </form>
<h3>Data submitted</h3> <br /> <p><b>First name:</b> @ViewBag.FirstName</p> <p><b>Last name:</b> @ViewBag.LastName</p> <p><b>Photo file name:</b> @ViewBag.Photo</p> <br /> @(Html.DevExtreme().Button() .Text("Reload demo") .Type(ButtonType.Default) .Icon("refresh") .OnClick(@<text> function() { window.location = window.location; } </text>) )
using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.IO; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public partial class FileUploaderController : Controller { public ActionResult FileSelection() { return View(); } [HttpPost] public ActionResult FileSelection(string firstName, string lastName, IFormFile photo) { // Learn to use the entire functionality of the dxFileUploader widget. // http://js.devexpress.com/Documentation/Guide/UI_Widgets/UI_Widgets_-_Deep_Dive/dxFileUploader/ ViewBag.FirstName = firstName; ViewBag.LastName = lastName; ViewBag.Photo = "[No photo]"; if(photo != null) { SaveFile(photo); ViewBag.Photo = photo.FileName; } return View("SubmissionResult"); } void SaveFile(IFormFile file) { var targetLocation = Path.Combine(_hostingEnvironment.WebRootPath, "uploads"); try { var path = Path.Combine(targetLocation, file.FileName); // Uncomment to save the file //using(var fileStream = System.IO.File.Create(path)) { // myFile.CopyTo(fileStream); //} } catch { Response.StatusCode = 400; } } } }
using Microsoft.AspNetCore.Hosting; using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public partial class FileUploaderController : Controller { IHostingEnvironment _hostingEnvironment; public FileUploaderController(IHostingEnvironment hostingEnvironment) { _hostingEnvironment = hostingEnvironment; } } }
#form { max-width: 600px; margin: auto; } #button { margin-top: 50px; margin-right: 20px; float: right; } #fileuploader-container{ border: 1px solid #d3d3d3; margin: 20px 20px 0 20px; } #form h3 { margin-left: 20px; font-weight: normal; font-size: 22px; }