Hi All,

This Blog will help you to use dropzone js and css to upload files in your project.

You can get dropzone package from NUGET. Once Installed get the reference of it in your project, Below example will show it used in MVC Project. You can reference dropzone in your BundleConfig.cs

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

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

In CSHTML Page:

@using (Html.BeginForm("SaveUploadedFile", "Sample", FormMethod.Post, new { enctype = "multipart/form-data", id = "dropzoneForm", @class = "dropzone" }))
{
<div class="text-center">
    <div class="fallback">
        <input name="file" type="file" />
        <input type="submit" value="Upload" />
    </div>
</div>
}

@section scripts{
<script type="text/javascript">
    //File Upload response from the server
    Dropzone.options.dropzoneForm = {
        maxFiles: 1, // This can be used to make multi files upload
        init: function () {
            this.on("maxfilesexceeded", function (data) {
                var res = eval('(' + data.xhr.responseText + ')');
            });

            this.on("complete", function (data) {
                var res = eval('(' + data.xhr.responseText + ')');
                var _this = this;
                if (res.Message.StatusCode == "404") {
                    alert(res.Message.StatusDescription);
                    _this.removeFile(data);
                }
            });

            this.on("addedfile", function (file) {
                var removeButton = Dropzone.createElement("<button>Remove file</button>");
                var _this = this;
                removeButton.addEventListener("click", function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    _this.removeFile(file);
                });
                // Add the button to the file preview element.
                file.previewElement.appendChild(removeButton);
            });
        }
    };
</script>}

SaveUploadedFile is a ActionMethod in Sample Controller which will be used to save the uploaded files.

In SaveUploadedFile ActionMethod you will get the files as:

HttpPostedFileBase file = Request.Files[0];

Happy Coding and Happy Uploading......