Dropzone, how do I submit form with data and multiple images?

See more:

C#

ASP.NET

Javascript

MVC

, +

I am using MVC in ASP.NET and want a Drag n Drop in my view. I would like to call a function in my controller when the images are dropped to verify them and show an OK to the user. When the user has finished typing in information and dropped the appropriate images he/she clicks "Fortsæt" (continue) and calls submit on the form.

This method should be called when an Image is dropped.

[HttpPost]
[Authorize(Roles = "host")]
public ActionResult UploadImages()
{
    bool suc;
    foreach (string s in Request.Files)
    {
        HttpPostedFileBase image = Request.Files[s];

        string fileName = Request.Headers["X-File-Name"];
        string fileExtension = "";
        if (!string.IsNullOrEmpty(fileName))
            fileExtension = Path.GetExtension(fileName);


        suc = VerifyImages();
    }
    return Json(suc);
}

This should be called when the user clicks "Continue"

[HttpPost]
[Authorize(Roles = "host")]
public ActionResult Create(FleaMarket model, HttpPostedFileBase[] images)
{
    ConditionallySetUser(model, User);

    foreach (var fileName in Request.Files)
    {
        HttpPostedFileBase file = Request.Files[fileName.ToString()];
        if (file != null && file.ContentLength > 0)
        {
            var image = HttpPostedFileBaseToByteArray(file);
            model.Images.Add(new FleaImage
                 {
                    Image = image, FleaMarketId = model.EventId
                 });
        }
    }

    db.FleaMarkets.Add(model);
    db.SaveChanges();

    ViewBag.HostID = new SelectList(db.Hosts, "HostId", "Name", model.HostId);
    TempData["market"] = model;
    return RedirectToAction("AddStallImage", "FleaMarket");
}

Here are some snips of my View

@model FleaPortal.Models.Database.FleaMarket
<link href="~/Content/basic.css" rel="stylesheet" />
<link href="~/Content/dropzone.css" rel="stylesheet" />
<script src="~/Scripts/dropzone.min.js"></script>

@using (Html.BeginForm("Create", "FleaMarket", method: FormMethod.Post, htmlAttributes: new { @encType = "multipart/form-data",@class="dropzone", @id="dropzoneForm"}))
{

   @Html.AntiForgeryToken()
   @Html.ValidationSummary(true)
   @Html.HiddenFor(model => model.HostId)
   <div class="row">
      <div class="form-group col-sm-6">
         @Html.LabelFor(model => model.HostId, "Arrangør")
         <label class="text-box single-line form-control" id="Name">
            @Html.DisplayFor(model => model.Host.UserProfile.UserName)
         </label>
      </div>

      <div class="form-group col-sm-6">
         @Html.LabelFor(model => model.Name)
         @Html.EditorFor(model => model.Name)
         @Html.ValidationMessageFor(model => model.Name)
      </div>
   </div>

    <div class="form-group col-sm-12">
        @Html.LabelFor(model => model.Description)
        @Html.EditorFor(model => model.Description, new { @class = "TextAreaInput" })
        @Html.ValidationMessageFor(model => model.Description)
    </div>
    ...
    ...
    <div class="form-group col-sm-12">
        <label>Stemningsbilleder</label>
        <div id="dropzonePreview">
            drop your images here
            <div class="dz-default dz-message" data-dz-message="">
            </div>
        </div>
    </div>
    ...
    ...
    <div class="btn-group two-bt-group col-sm-12">
        <button name="ButtonType" value="Continue" id="submitAll" type="submit" class="btn btn-success two-bt">@Resources.Views_Global_Continue</button>
        <button name="ButtonType" value="Cancel" type="button" class="btn btn-danger two-bt" onclick="location.href='@Url.Action("Manage", "Account")'">@Resources.Views_Global_Cancel</button>
    </div>
    @section Scripts {
    @Scripts.Render("~/bundles/datepicker")
    @Scripts.Render("~/bundles/booking")
@Scripts.Render("~/bundles/dropzonescripts")

    <script type="text/javascript">
        $(document).ready(function() {
            $(".form_date").datetimepicker({ format: 'yyyy-mm-dd', startView: 2, minView: 2 });
            $(".form_time").datetimepicker({ format: 'hh:ii', startView: 1, maxView: 1 });
        });
    </script>
    <script>
        Dropzone.options.dropzoneForm = {
            clickable: false,
            //url: '/FleaMarket/UploadImages',
            autoProcessQueue: false,
            uploadMultiple: true,
            paramName: "images",// Must match the name of the HttpPostedFileBase argument that the Upload action expects
            maxFiles: 100,
            autoQueue: false,
            previewsContainer: "#dropzonePreview",
            parallelUploads:100,
            init: function () {
                debugger;
                this.on("success", function (file, responseText) {
file.previewTemplate.appendChild(document.createTextNode(responseText));
                });
            }
        };
  </script>
    <pre>

I have spent way too much time trying to figure this out, and I believe there might be a simple solution - I just don't know. ? Can someone help me figuring this out?

Many thanks in advance.