Integrating DropzoneJS into an ASP.NET MVC site

Dropzone allows you to easily handle file upload via drag and drop.

Here is a simple tutorial on how to integrate DropzoneJS into an existing ASP.NET MVC application. The instructions on the dropzone page are easy to follow but I include here a version tailored for ASP.NET MVC.

First off, there is a NuGet package but I prefer not to use it so that I can include only the necessary files and choose where those files are located.

The first step is to obtain the JavaScript file and include it into your /Scripts folder.

dropzone1

Optionally you can also download and use the CSS file. Put this one in your /Content folder.

dropzone2

Once these files are in place, it’s time to create some bundles. In App_Start/BundleConfig.cs add the following bundles:

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

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

On the page you want to use dropzone on, add calls to the Styles and Scripts render methods and also a form element with the dropzone class. The class name is how dropzone locates the control so it can make the appropriate modifications.

Remember that you can’t nest form elements so if your page already contains another form your will need to make sure they aren’t nested.

Here is how our page.cshtml:

@Styles.Render("~/Content/dropzone-css")

<div class="jumbotron">
    <h1>dropzone test</h1>
</div>

<div class="row">
    @using (Html.BeginForm("FileUpload", "Home", 
                           FormMethod.Post,
                           new
                           {
                               @class = "dropzone",
                               id = "dropzone-form",
                           }))
    {
        <div class="fallback">
            <input name="file" type="file" multiple />
        </div>
    }
</div>

@section scripts {
    @Scripts.Render("~/bundles/dropzone")

    <script type="text/javascript">
        Dropzone.options.dropzoneForm = {
            paramName: "file",
            maxFilesize: 20,
            maxFiles: 4,
            acceptedFiles: "image/*",
            dictMaxFilesExceeded: "Custom max files msg",
        };
    </script>
}

The form contains an optional fallback element for clients who don’t support JavaScript. Also note in the scripts section, custom configuration options are declared.

You may notice I have set a maxFilesize. This value is in MB. It is necessary to change the maxRequestLength attribute in your web.config file to a value at least as big as maxFilesize, otherwise IIS will reject files under the maxFilesize limit.

Here is how to change your maxRequestLength:

<system.web>
    <compilation debug="true" targetFramework="4.5.2" />
    <!--maxRequestLength increased to 20 MB-->
    <httpRuntime targetFramework="4.5.2" 
                 maxRequestLength="20480" />
</system.web>

After we have updated our web.config we can now move on to the controller.

[HttpPost]
public ActionResult FileUpload(HttpPostedFileBase file)
{
    try
    {
        var memStream = new MemoryStream();
        file.InputStream.CopyTo(memStream);

        byte[] fileData = memStream.ToArray();

        //save file to database using fictitious repository
        var repo = new FictitiousRepository();
        repo.SaveFile(file.FileName, fileData);
    }
    catch (Exception exception)
    {
        return Json(new { success = false, 
                          response = exception.Message });
    }

    return Json(new { success = true, 
                      response = "File uploaded." });
}

When uploading multiple files at the same time, this method will get called as many times as there are files.

If you want to handle the returned JSON, you need to handle events from dropzone, in this case the complete event.

Here is how the page looks after having uploaded two pictures:

dropzone3

The competent programmer is fully aware…

The competent programmer is fully aware of the strictly limited size of his own skull; therefore he approaches the programming task in full humility, and among other things he avoids clever tricks like the plague. In the case of a well-known conversational programming language I have been told from various sides that as soon as a programming community is equipped with a terminal for it, a specific phenomenon occurs that even has a well-established name: it is called “the one-liners”. It takes one of two different forms: one programmer places a one-line program on the desk of another and either he proudly tells what it does and adds the question “Can you code this in less symbols?” —as if this were of any conceptual relevance!— or he just asks “Guess what it does!”. From this observation we must conclude that this language as a tool is an open invitation for clever tricks; and while exactly this may be the explanation for some of its appeal, viz. to those who like to show how clever they are, I am sorry, but I must regard this as one of the most damning things that can be said about a programming language. Another lesson we should have learned from the recent past is that the development of “richer” or “more powerful” programming languages was a mistake in the sense that these baroque monstrosities, these conglomerations of idiosyncrasies, are really unmanageable, both mechanically and mentally.

– Edsger Dijkstra, The Humble Programmer

ASP.NET MVC: Dynamically adding an existing View as a Partial View to a parent

Let’s say you have a pre-existing Model/View/Controller. For my purposes I will call it FirstController, FirstModel and the view, Details.

In this post I will explain how to reuse this form and model in another View/Controller which will become it’s parent. I will also show how to dynamically add this child view to the parent via Ajax. This way we can conditionally add the view based on the user’s input.

Here is our pre-existing MVC:

namespace ChildModel.Controllers
{
    public class FirstController : Controller
    {
        public ActionResult Details()
        {
            var model = new FirstModel { Name = "Gilles",
                                         Number = 42 };
            return View(model);
        }

        [HttpPost]
        public ActionResult Details(FirstModel model)
        {
            if (!ModelState.IsValid)
            {
                return View();
            }

            return RedirectToAction("Index", "Home");
        }
    }
}

namespace ChildModel.Models
{
    public class FirstModel
    {
        public string Name { get; set; }
        public int Number { get; set; }
    }
}

With this simple view:

@model ChildModel.Models.FirstModel

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>First - Details</title>
</head>
<body>
<div>
<h1>First - Details</h1>
@using (Html.BeginForm("Details", "First"))
        {
            @Html.LabelFor(model => model.Name, "Name")
            @Html.TextBoxFor(model => model.Name)

            @Html.LabelFor(model => model.Number, "Number")
            @Html.TextBoxFor(model => model.Number)

            <input type="submit" value="Submit" />
        }</div>
</body>
</html>

first1

Here is the existing Model/View/Controller which will eventually become the parent:

namespace ChildModel.Controllers
{
    public class ParentController : Controller
    {
        public ActionResult Index()
        {
            var model = new ParentModel { IsChecked = true };
            return View(model);
        }

        [HttpPost]
        public ActionResult Submit(ParentModel model)
        {
            if (!ModelState.IsValid)
            {
                return View();
            }

            return RedirectToAction("Index", "Home");
        }
    }
}

namespace ChildModel.Models
{
    public class ParentModel
    {
        public bool IsChecked { get; set; }
    }
}
@model ChildModel.Models.ParentModel

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Parent</title>
</head>
<body>
<div>
<h1>Parent</h1>
@using (Html.BeginForm("Submit", "Parent"))
        {
            @Html.LabelFor(model => model.IsChecked, "Is Checked ?")
            @Html.CheckBoxFor(model => model.IsChecked)

            <input type="submit" value="Submit" />
        }</div>
</body>
</html>

parent1

Let’s start by including First into Parent. We will do the dynamic Ajax part afterwards.

Since we don’t want to include the form in our parent page, because our parent already has a form and submit button, we will take out the fields we want to reuse and put them in their own partial view.

_FirstFields.cshtml:

@model ChildModel.Models.FirstModel

@Html.LabelFor(model => model.Name, "Name")
@Html.TextBoxFor(model => model.Name)

@Html.LabelFor(model => model.Number, "Number")
@Html.TextBoxFor(model => model.Number)

And call this Partial View in First/Details.cshtml:

@using (Html.BeginForm("Details", "First"))
{
    Html.RenderPartial("_FirstFields");

    <input type="submit" value="Submit" />
}

In our ParentModel we will need to add a new property of type FirstModel:

public class ParentModel
{
    public bool IsChecked { get; set; }
    public FirstModel ChildModel { get; set; }
}

In our Parent/Index.cshtml view we can include the partial view. Notice the use of the ViewDataDictionary in RenderPartial. If we simply asked for the view, the model binder wouldn’t be able to get the data back on a Post. The HtmlFieldPrefix in our ViewDataDictionary is set to the name of our child model property.

This will have for effect of changing the Ids and names of the fields on the partial view allowing the model binder to correctly bind the fields.

@using (Html.BeginForm("Submit", "Parent"))
{
    @Html.LabelFor(model => model.IsChecked, "Is Checked ?")
    @Html.CheckBoxFor(model => model.IsChecked)

    Html.RenderPartial("../First/_FirstFields",
                       Model.ChildModel,
        new ViewDataDictionary(Html.ViewData)
        {
            TemplateInfo = new TemplateInfo
            {
                HtmlFieldPrefix = "ChildModel"
            }
        });

    <input type="submit" value="Submit" />
}

Now we have completed the first part by including a child model/view in our parent. Let’s add the Ajax part.

We will remove our RenderPartial and replace it with a div element which will serve to host the dynamic html code. We will also add an Ajax action link to call a new method on our ParentController.

@using (Html.BeginForm("Submit", "Parent"))
{
    @Html.LabelFor(model => model.IsChecked, "Is Checked ?")
    @Html.CheckBoxFor(model => model.IsChecked)

    @Ajax.ActionLink("Add Child Form", "GetChildElement",
                     "Parent",
                    new AjaxOptions
                    {
                        AllowCache = false,
                        InsertionMode =
                                InsertionMode.Replace,
                        HttpMethod = "Get",
                        UpdateTargetId = "childContainer",
                    })
<div id="childContainer"></div>
<input type="submit" value="Submit" />
}

In our ParentController we add the Ajax action method GetChildElement this time setting the prefix manually:

public PartialViewResult GetChildElement()
{
    ViewData.TemplateInfo.HtmlFieldPrefix = "ChildModel";
    return PartialView("../First/_FirstFields");
}

Don’t forget to add Ajax capabilities to your project like detailed here.

And everything should be working.

parent2