javascript - mvc4 フォームを使用して dropzone.js でカスタム アップロード エリアを構成する方法

Question

dropzone.jsを調べ始めたところですが、 previewTemplate領域を何らかの方法で変更して、アップロードされたファイルに関する追加情報を追加し、フォームを mvc メソッドに送信することは可能ですか?

簡単にするために、ユーザーがアップロードするファイルごとにDocumentTypeIDとExpirationDateの 2 つのフィールドを追加します。

@model MyProject.Model.Document

@using (Html.BeginForm("Create", "Document", FormMethod.Post, new { enctype = "multipart/form-data", @class = "dropzone", @id = "my-awesome-dropzone" }))
{

<div class="row-fluid">
    <fieldset class="span6">  
        <div class="editor-label">
            @Html.LabelFor(model => model.DocumentTypeID, "DocumentType")
        </div> 
        <div class="editor-field">
            @Html.DropDownList("DocumentTypeID", String.Empty)
            @Html.ValidationMessageFor(model => model.DocumentTypeID)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.ExpirationDate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ExpirationDate)
            @Html.ValidationMessageFor(model => model.ExpirationDate)
        </div>
    </fieldset>
    <div class="span6">   <div class="dropzone-previews"></div> </div>
</div>
}

---

これは、一度に1つのファイルを受け入れるコントローラーメソッドです。

    [HttpPost]
    public ActionResult Create(Document document, HttpPostedFileBase file)
    {
        if (ModelState.IsValid && file != null)
        {

            db.Documents.Add(document);
            document.FilePath = ProcessDocumentUpload(Request.Files[0], document.DocumentID);

            db.SaveChanges();
            return "";//? // not sure what to return yet
        }


    }

---

現在、dropzone の Js 関数

    <script type="text/javascript">
    $(function () {
       // "myAwesomeDropzone" is the camelized version of the HTML element's ID
        Dropzone.options.myAwesomeDropzone = {
            autoDiscover: false,
            paramName: "file", // The name that will be used to transfer the file
            maxFilesize: 5, // MB
            maxFiles: 1, //for now upload one at a time
           //I started looking at the template and added two elements as an experiment.
            previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n <input type=\"text\" data-dz-doc-expiration-date class=\"dz-doc-input\" />\n <select class=\"dz-doc-input\" data-dz-doc-document-type-id  ></select>\n   <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>\n  <div class=\"dz-success-mark\"><span>✔&lt;/span></div>\n  <div class=\"dz-error-mark\"><span>✘&lt;/span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>",
            //dictDefaultMessage: "Drop files here to upload or click",
            // The configuration that allows the whole form to be submitted on button click
            autoProcessQueue: false,
            uploadMultiple: false,
            parallelUploads: 1,
            addRemoveLinks: true,
            previewsContainer: ".dropzone-previews", //show a preview in another place
           // The setting up of the dropzone
            init: function () {
                var myDropzone = this;

                // First change the button to actually tell Dropzone to process the queue.
                $("input[type=submit]").on("click", function (e) {
                    // Make sure that the form isn't actually being sent.
                    e.preventDefault();
                    e.stopPropagation();
                    myDropzone.processQueue();
                });
                // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
                // of the sending event because uploadMultiple is set to true.
                this.on("sendingmultiple", function () {
                    // Gets triggered when the form is actually being sent.
                    // Hide the success button or the complete form.
                });
                this.on("successmultiple", function (files, response) {
                    // Gets triggered when the files have successfully been sent.
                    // Redirect user or notify of success.
                });
                this.on("errormultiple", function (files, response) {
                    // Gets triggered when there was an error sending the files.
                    // Maybe show form again, and notify user of error
                });

            },
            accept: function (file, done) {
                //maybe do something here for showing a dialog or adding the fields to the preview?

            }
        };

    });
</script>

ご覧いただきありがとうございます。