File Uploader - Form Upload

The FileUploader component 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 property of the FileUploader is set to «image/*».

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

<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") .InputAttr("aria-label", "First Name") .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") .InputAttr("aria-label", "Last Name") .Value("Smith") ) </div> </div> </div> <div id="fileuploader-container"> @(Html.DevExtreme().FileUploader() .Name("Photo") .SelectButtonText("Select photo") .LabelText("") .Accept("image/*") .UploadMode(FileUploadMode.UseForm) .InputAttr("aria-label", "Select Photo") ) </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 DevExtreme.MVC.Demos.Models.FileManagement; using DevExtreme.MVC.Demos.Models.FileUploader; using Newtonsoft.Json; using System; using System.IO; using System.Linq; using System.Net; using System.Web; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class FileUploaderController : Controller { public ActionResult FileSelection() { return View(); } [HttpPost] public ActionResult FileSelection(string firstName, string lastName, HttpPostedFileBase photo) { ViewBag.FirstName = firstName; ViewBag.LastName = lastName; ViewBag.Photo = "[No photo]"; if(photo != null) { // Write code that saves the 'photo' file. // Don't rely on or trust the FileName property without validation. ViewBag.Photo = photo.FileName; } return View("SubmissionResult"); } } }

#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; }

To see an example of server-side implementation, refer to the HTML Form Upload article for ASP.NET or PHP.

NOTE

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.