Display and Upload Profile Picture using Kendo File Upload MVC
Telerik Kendo provides component and tools to speed up the web development with modern UI. Kendo File Upload for MVC is one such component with support features like drag and drop, Async upload with progress bar and so on. This article discusses about using Kendo File Upload MVC to display a user profile picture and upload to server using synchronous method.
The coding in this article are those of the developers working on Kendo UI and does not represent Progress Telerik’s positions, strategies or opinions.
Required Steps
- Include the Kendo UI for MVC library to your solution.
- Configure the required bundles in BundleConfig.cs
- Add a new MVC Controller to manage profile pictures
- Add two ActionFilters in the controller. One to display the page and another one to accept the submitted image and save it to hard disk.
- Will create one View Index which includes the Kendo File Upload MVC control and supporting JavaScript
- Add Kendo File Upload MVC control inside MVC Form controller to save image on form submit.
Display photo before upload using Kendo File Upload MVC
One of essential feature required is to display the selected profile picture to user before uploading it to server. To do this we can subscribe to Kendo File Upload MVC client side events.
Kendo File upload provides us various events such as Cancel, Clear and so on. We are going to utilize Select and Remove functions for our scenario.
On Select function, we will use the FileReader to read the selected image, display it as dataUrl, and remove function to reset back to default image.
Kendo File Upload MVC Output
Kendo File Upload MVC Code
Index.cshtml
@{
ViewBag.Title = "Home Page";
}
<div class="row">
<div class="col-md-4" style="float:none;margin:auto;margin-top:10%;">
@using (Html.BeginForm("Save", "Home", FormMethod.Post))
{
<div>
<div class="col-md-12">
<div class="card">
<div class="card-body" style="text-align:center;">
<img [email protected] id="displayPhoto" class="imageDisplay img-thumbnail" />
</div>
</div>
</div>
<div class="col-md-12">
@(Html.Kendo().Upload()
.Name("Photo")
.HtmlAttributes(new { aria_label = "files", @style = "width:300px;" })
.Validation(validation =>
{
validation.AllowedExtensions(new string[] { ".jpg", ".jpeg", ".png", ".bmp", ".gif" });
validation.MaxFileSize(500000);
})
.Messages(m => m.Select("Select Image"))
.Multiple(false)
.Events(events => events
.Select("onSelect")
.Remove("onRemove")
)
)
</div>
<div class="col-md-12" style="margin-top:5px;">
<button type="submit" class="btn btn-success w-100">Save</button>
</div>
</div>
}
</div>
</div>
<script>
function onRemove(e) {
$("#displayPhoto").attr("src", "/images/profile-default.png");
}
function onSelect(e) {
var file = e.files[0].rawFile;
var ext = e.files[0].extension.toLowerCase();
if (ext == ".jpg" || ext == ".jpeg" || ext == ".png" || ext == ".bmp" || ext == ".gif" ) {
var reader = new FileReader();
reader.onloadend = function () {
$("#displayPhoto").attr("src", this.result); //img id where the photo is to be displayed
};
reader.readAsDataURL(file); //Read the selected photo and display in UI
}
else { //If file extension does not belong to photo display a default image
$("#displayPhoto").attr("src", "/images/profile-default.png");
}
}
</script>
HomeController.cs
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Hosting;
using System.Web.Mvc;
namespace craftedforeveryone.com.Controllers
{
public class HomeController : Controller
{
string photoPath = Path.Combine(HostingEnvironment.MapPath("~/Images"), "profile_photo.jpg");
public ActionResult Index()
{
ViewBag.Photo =System.IO.File.Exists(photoPath)?"/images/profile_photo.jpg" :"/images/profile-default.png";
return View("Index");
}
public ActionResult Save(HttpPostedFileBase Photo)
{
if(Photo!=null)
{
Photo.SaveAs(photoPath);
}
return Index();
}
}
}
