I'm trying to upload files using dropzone.js

View:

@using (Html.BeginForm("SaveMethod", "ControllerName", FormMethod.Post, new { enctype = "multipart/form-data", @class = "dropzone", id = "js-upload-form" }))
........................
 <div class="form-inline">
                <div class="form-group">
                    <input type="file" name="MainFile" id="js-upload-files"/>                    
                </div>
                <div class="upload-drop-zone" id="drop-zone">
                    Just drag and drop files here
                </div>
                <div class="dropzone-previews"></div>
</div>

JS:

 var formData = null;
  formData = new FormData($form[0]);

  dropZone.ondrop = function (e) {
            e.preventDefault();
            this.className = 'upload-drop-zone';

            startUpload(e.dataTransfer.files)
        }

        dropZone.ondragover = function () {
            this.className = 'upload-drop-zone drop';
            return false;
        }

        dropZone.ondragleave = function () {
            this.className = 'upload-drop-zone';
            return false;
        }   
       var startUpload = function (files) {            
        for (var i = 0; i < files.length; i++) {
            formData.append(files[i].name, files[i]);
        }            
    }

Controller:

 [HttpPost]
 public JsonResult SaveMethod(TaskManage objTaskManage, HttpPostedFileBase files)
 {
 }

Now, after submit, i want to have files that was dropped on drop area along with the files attached in upload control. Here, what happens is files giving me null and when i use Request.Files["MainFile"] i get only the files dropped on dropzone area, it doesn't show me the file i have upload to control.

I'm not able to find out the issue. Any help is really appreciated.

Related posts

Recent Viewed