Dropzone with multiple files in asp.net(upload)

Scripts
--------

 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

    <link rel="stylesheet" href="http://localhost:1202/code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />

    

    <script src="Jquery/bootstrap.min.js"></script>

    <link href="Jquery/bootstrap.min.css" rel="stylesheet" />

    <script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>

    <link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css" />

  <script>
        Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element

            autoDiscover: false,
            addRemoveLinks: true,

            // The configuration we've talked about above
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 20,
            url: "fileupload.ashx",
            addRemoveLinks: true,
            maxFiles: 5,
            maxFilesize: 5,
            dictDefaultMessage: "Drag or click to add photos",

            // The setting up of the dropzone
            init: function () {
                var myDropzone = this;

                // First change the button to actually tell Dropzone to process the queue.
                this.element.querySelector("button[type=submit]").addEventListener("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 (file, xhr, formData) {
                    // Gets triggered when the form is actually being sent.
                    // Hide the success button or the complete form.



                    formData.append('title', $("input[name=title]").val());

       

                });
                this.on("successmultiple", function (files, response) {
                    alert(response);
                });
                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
                });
            }

        }
    </script>



fileupload.aspx
------------------

    <form id="my-awesome-dropzone" class="dropzone">

        <div>

            <input type="text" name="title" placeholder="Title"  />

          

            <button id="submit-all" type="submit" class="button3" style="cursor: pointer">Post</button>

        </div>

        <div>

            <div class="dropzone-previews" style="border: 1px dashed blue;"></div>

        </div>

   

    </form>

fileupload.ashx

---------------------

<%@ WebHandler Language="C#" Class="fileupload" %>

using System;

using System.Web;

using System.IO;

public class agoodthing : IHttpHandler {

    

    public void ProcessRequest (HttpContext context) {

        context.Response.ContentType = "text/plain";

        context.Response.Write("Hello World");

       HttpFileCollection files = context.Request.Files;

       

        for (int i = 0; i < files.Count; i++)

        {

       

            string title = context.Request["title"];

           

           

            string photo_name = DateTime.Now.ToString("yyyy_MM_dd_HH_mm_ss");

            HttpPostedFile file = files[i];

            //string fileExtension = file.ContentType;

            string photo_box_id = photo_name  ;

            string fname = context.Server.MapPath("~/dump/" +photo_box_id+ file.FileName);

          

            file.SaveAs(fname);

            //context.Response.Write( title );

        }

     

    }

    public bool IsReusable {

        get {

            return false;

        }

    }

}