title: why my dropzone doesn't work properly
body: <p>i used this tutorial for create dropzone area in my web application mvc 5.</p>
  
  <p><a href="http://www.codeproject.com/Articles/874215/File-upload-in-ASP-NET-MVC-using-Dropzone-JS-and-H" rel="nofollow noreferrer">http://www.codeproject.com/Articles/874215/File-upload-in-ASP-NET-MVC-using-Dropzone-JS-and-H</a></p>
  
  <p>but when i drag and drop my image, the dropzone layout doesn't work. 
  below is my code:</p>
  
  <p><strong>_layout</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;@ViewBag.Title - My ASP.NET Application&lt;/title&gt;
      @Styles.Render("~/Content/css")
      @Styles.Render("~/Content/dropzonescss")
      @Scripts.Render("~/bundles/modernizr")
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
          &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
              &lt;/div&gt;
              &lt;div class="navbar-collapse collapse"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li&gt;@Html.ActionLink("Home", "Index", "Home")&lt;/li&gt;
                      &lt;li&gt;@Html.ActionLink("About", "About", "Home")&lt;/li&gt;
                      &lt;li&gt;@Html.ActionLink("Contact", "Contact", "Home")&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container body-content"&gt;
          @RenderBody()
          &lt;hr /&gt;
          &lt;footer&gt;
              &lt;p&gt;&amp;copy; @DateTime.Now.Year - My ASP.NET Application&lt;/p&gt;
          &lt;/footer&gt;
      &lt;/div&gt;
  
      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/bootstrap")
      @Scripts.Render("~/bundles/dropzonescripts")
      &lt;script type="text/javascript"&gt;
  
          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();
                  });
  
              }
          };
  
      &lt;/script&gt;
  
      @RenderSection("scripts", required: false)
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Index</strong></p>
  
  <pre><code>@{
      ViewBag.Title = "Home Page";
  }
  
  
  &lt;form action="~/Home/SaveUploadedFile" method="post" class="dropzone" id="Dropzone.options.dropzoneJsForm" &gt;
      &lt;div class="fallback"&gt;
          &lt;input name="file" type="file" multiple /&gt;
          &lt;input type="submit" value="Upload" /&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>homecontroller</strong></p>
  
  <pre><code>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 &amp;&amp; file.ContentLength &gt; 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" });
      }
  }
  </code></pre>
  
  <p>BundleConfig add</p>
  
  <pre><code>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"));
  </code></pre>
  
  <p>I have no idea why it behaves this way.
  The loading part is working properly, but the graphics is wrong and looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/MA4TN.png" alt="enter image description here"></p>