Drag and Drop Files and Images to ASP.NET MVC App

Muhammad Rashed Otahbashi

Rate me:

5.00/5 (4 votes)

27 Mar 2015CPOL2 min read

40.1K

How to implement Drag and drop files and Images feature in ASP.NET MVC App

Introduction

You can see the final result at http://youtu.be/7w0_D0qYVPo.

This is a tutorial about uploading files using drag and drop with ASP.NET MVC by adding the minimum amount of coding.

Background

Drag and drop is a great HTML5 feature, we can leverage it to upload files to the server. This demo simplifies the whole process. However, if you need to customize it, it is important to understand drag and drop in HTML5, and you can add more features to this tool using this link.

Using the Code

In this tip, we will use the library from http://www.dropzonejs.com/ which provides us with basic functionality for dragging and dropping images and other file types directly to the browser.

First, use these files, dropzone.css and dropzone.js and locate them in this location:

~/Scripts/dropzone

Add them to bundle in the BundleConfig.cs which is usually located in the App_Start folder.

JavaScript

bundles.Add(new ScriptBundle("~/bundles/dropzonescripts").Include(
                     "~/Scripts/dropzone/dropzone.js"));

            bundles.Add(new StyleBundle("~/Content/dropzonescss").Include(
                     "~/Scripts/dropzone/dropzone.css"));

Now go to the Layout and add a style render call in the head like this @Styles.Render("~/Content/dropzonescss")
and in the end of the body tag, add this @Scripts.Render("~/bundles/dropzonescripts") so the simplest layout would be like this:

ASP.NET

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Styles.Render("~/Content/dropzonescss")
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/dropzonescripts")
    @RenderSection("scripts", required: false)
</body>
</html>

In any controller (should be one controller in the project), we should add the upload action which accepts the uploaded files and saves them to the hard disk and then returns the file identification of the uploaded file (note that in this step, we can save the file to database or to another service). Currently, we will save the file to the folder (~/Images/uploaded) and if does not exist, it will be created. The disadvantage of this approach is (after publishing) that the user of the IIS which is normally IUSER should have a full permission on that folder.

JavaScript

public ActionResult SaveUploadedFile()
        {
            bool isSavedSuccessfully = true;
            string fName = "";
            try
            {
                foreach (string fileName in Request.Files)
                {
                    HttpPostedFileBase file = Request.Files[fileName];
                    //Save file content goes here
                    fName = Guid.NewGuid().ToString(); //file.FileName;
                    if (file != null && file.ContentLength > 0)
                    {
                        var originalDirectory = 
                                 new System.IO.DirectoryInfo(
                                      string.Format("{0}Images\\uploaded", Server.MapPath(@"\")));
                        string pathString = System.IO.Path.Combine(originalDirectory.ToString(),
                                                        "imagepath");
                        var fileName1 = System.IO.Path.GetFileName(file.FileName);
                        bool isExists = System.IO.Directory.Exists(pathString);
                        if (!isExists)
                            System.IO.Directory.CreateDirectory(pathString);
                        var path = string.Format("{0}\\{1}", pathString, fName);
                        file.SaveAs(path);
                    }
                }
            }
            catch (Exception ex)
            {
                isSavedSuccessfully = false;
            }

            if (isSavedSuccessfully == false )
                return Json(new { Message = fName });
            else
                return Json(new { Message = "Error in saving file" });
        }

You should add the File Upload Helper class to your project, it accepts a parameter which refers to the URL of the action we have just created:

JavaScript

namespace System.Web.Mvc
{
    public static class FileUploadFormHelper
    {
        public static MvcHtmlString FileUploadForm(this HtmlHelper htmlHelper, string ControllerAction)
        {
            string formTemplate = 
                   @"<form action='{0}' method='post' 
                      enctype='multipart/form-data' class='dropzone'  id='dropzoneForm'>
                                        <div class='fallback'>
                                            <input name='file' type='file' multiple />
                                            <input type='submit' value='Upload' />
                                        </div>
                                    </form>";
            return new MvcHtmlString(string.Format(formTemplate, ControllerAction)); ;
        }
    }
}

Then, in the view that you want to show the uploader, you can use the helper method (Html.FileUploadForm) and pass to it the location of upload action as a parameter (note that the console.log raises an exception in Internet Explorer, so you can alert the message instead).

ASP.NET

@Html.FileUploadForm("../Home/SaveUploadedFile")

@section scripts{
<script type="text/javascript">
    Dropzone.options.dropzoneForm = {
        init: function () {
            myDropzone = this;
            this.on("complete", function (data) {
                var res = JSON.parse(data.xhr.responseText);
                //console.log(res.Message);
            });
        }
    };
</script>
}

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Muhammad Rashed Otahbashi

Software Developer (Senior) Starways

Saudi Arabia

Muhammad Rashed Otahbashi is a Microsoft Certified Professional and a Senior Application Developer with 10 years of experience

https://www.linkedin.com/pub/muhammad-rashed-otahbashi/50/529/947

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Drag and Drop Files and Images to ASP.NET MVC App

Introduction

Background

Using the Code

License

Comments and Discussions