Dropzone Js-Upload and resize the image in jQuery ajax asp.net mvc

In this article, I will show how to resize an image while upload using jQuery ajax in asp.net mvc. The dropzone.js file upload plugin provides drag and drag files with a good user interface. It also supports image preview with a nice progress bar while uploading images.

The Dropzone Js does not provide the server side coding, so that we need to write code using the c# with Generic handler (ashx file) in the asp.net mvc project. We have to achieve saving the image and resize it on the server side. We needed two namespaces System.IO and System.Drawing in the generic handler file..

Step 1: Create an asp.net mvc project and right click on the controller folder and create a new controller and name it as HomeController. Inside the HomeController copy and paste the following code.

public ActionResult Index()
        {
            return View();
        }

Step 2: Right click on the index view and create a razor view named as index. Download jQuery multiple file upload plugin dropzone.js and dropzone.css and then include both files in the razor view or register as cdn. Copy and paste the Drag and drop Html code.

@{
    ViewBag.Title = "html5 file upload drag and drop";
}
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        Dropzone.autoDiscover = false;
        //SimpleDropzonejs 
        $("#dZUpload").dropzone({
            url: "GenericHandler.ashx",
            maxFiles: 5,
            addRemoveLinks: true,
            success: function (file, response) {
                var imgName = response;
               file.previewElement.classList.add("dz-success");
                alert("Successfully uploaded :" + imgName);
            },
            error: function (file, response) {
               file.previewElement.classList.add("dz-error");
            }
        });
    });
</script>
<h2>html5-file upload drag and drop</h2>
<div id="dZUpload" class="dropzone">
    <div class="dz-defaultdz-message"></div>
</div>

Step 3: Create a Generic Handler file in the application by the following steps. Right click on the project and select new item-- > Select Generic handler file and name it as GenericHandler.ashx. Also create a new folder and name it as UploadFiles. Copy and paste the following code on it,

public class GenericHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
 
            string dirFullPath = HttpContext.Current.Server.MapPath("~/image/");
            string[] files;
            int numFiles;
            files = System.IO.Directory.GetFiles(dirFullPath);
            numFiles = files.Length;
            numFiles = numFiles + 1;
 
            string str_image = "";
 
            foreach (string s in context.Request.Files)
            {
                HttpPostedFile file = context.Request.Files[s];
                //  int fileSizeInBytes = file.ContentLength;
                string fileName = file.FileName;
                string fileExtension = file.ContentType;
 
                if (!string.IsNullOrEmpty(fileName))
                {
                    fileExtension = Path.GetExtension(fileName);
                    str_image = "file_" +numFiles.ToString() + fileExtension;
                    string pathToSave = HttpContext.Current.Server.MapPath("~/UploadFiles/")+ str_image;
                    System.Drawing.Bitmap bmpPostedImage = new System.Drawing.Bitmap(file.InputStream);
 
                    //ResizeImage method call
                    System.Drawing.Image objImage = ResizeImage(bmpPostedImage,200);
                    objImage.Save(pathToSave,System.Drawing.Imaging.ImageFormat.Jpeg);
                }
            }
            context.Response.Write(str_image);
        }
public static System.Drawing.Image ResizeImage(System.Drawing.Image image, int maxHeight)
        {
            var ratio = (double)maxHeight / image.Height;
            var newWidth = (int)(image.Width * ratio);
            var newHeight = (int)(image.Height * ratio);
            var newImage = new Bitmap(newWidth, newHeight);
            using (var g = Graphics.FromImage(newImage))
            {
                g.DrawImage(image, 0, 0,newWidth, newHeight);
            }
            return newImage;
        }

Description: When user drags the image and drop in the dropzone as shown in the figure. You can see the progress bar while uploading images and  see the preview of the image after uploaded. The uploaded image should be resized and saved in the project specified folder. 

Drag and drop picture upload and resize jQuery demo: