why my dropzone doesn't work properly

Question

i used this tutorial for create dropzone area in my web application mvc 5.

http://www.codeproject.com/Articles/874215/File-upload-in-ASP-NET-MVC-using-Dropzone-JS-and-H

but when i drag and drop my image, the dropzone layout doesn't work. below is my code:

_layout

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/dropzonescss")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/dropzonescripts")
    <script type="text/javascript">

        Dropzone.options.dropzoneJsForm = {

            //prevents Dropzone from uploading dropped files immediately
            autoProcessQueue: false,

            init: function () {
                var submitButton = document.querySelector("#submit-all");
                var myDropzone = this; //closure

                submitButton.addEventListener("click", function () {

                    //tell Dropzone to process all queued files
                    myDropzone.processQueue();
                });

            }
        };

    </script>

    @RenderSection("scripts", required: false)
</body>
</html>

Index

@{
    ViewBag.Title = "Home Page";
}


<form action="~/Home/SaveUploadedFile" method="post" class="dropzone" id="Dropzone.options.dropzoneJsForm" >
    <div class="fallback">
        <input name="file" type="file" multiple />
        <input type="submit" value="Upload" />
    </div>
</form>

homecontroller

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 = file.FileName;
            if (file != null && file.ContentLength > 0)
            {

                var originalDirectory = new DirectoryInfo(string.Format("{0}Images\\WallImages", Server.MapPath(@"\")));

                string pathString = System.IO.Path.Combine(originalDirectory.ToString(), "imagepath");

                var fileName1 = 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, file.FileName);
                file.SaveAs(path);

            }

        }

    }
    catch (Exception ex)
    {
        isSavedSuccessfully = false;
    }


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

BundleConfig add

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

I have no idea why it behaves this way. The loading part is working properly, but the graphics is wrong and looks like:

在此处输入图片说明

Answer 1

It looks like the dropzone nuget package doesn't create the \\css sub folder for the dropzone css files, so the bundle config is incorrect. (well it is correct but the folder isn't there).

Create the folder scripts\\dropzone\\css (and move the css files from the scripts\\dropzone folder to that new folder)

You can see how the dropzone folder should look by looking at the solution that is on github:

Dropzone example solution

why my dropzone doesn't work properly

Question

1 answers

solution1
1 ACCPTED 2015-06-29 10:56:54

why my dropzone doesn't work properly

Question

1 answers

solution1 1 ACCPTED 2015-06-29 10:56:54

solution1
1 ACCPTED 2015-06-29 10:56:54