asp.net-mvchttp-postdropzone.jsdropzoneiformfile

List<IFormFile> files gets nothing from dropzone post mvc


I'm trying to send images from dropzone to my controller mvc project by httpPost

The forms are calling correctly the IActionResult but the files count are always 0

When the forms load I get enter image description here

but I'm already giving a URL. Don't know what's the error.

Here is my cshtml script of dropzone config

@section Scripts
{

<link rel="stylesheet" href="~/css/basic.css" />
<link rel="stylesheet" href="~/css/dropzone.css" />
<script type="text/javascript" src="~/js/dropzone.js"></script>
<script type="text/javascript" src="~/js/dropzone-amd-module.js"></script>
<script>

    Dropzone.autoDiscover = false;
    $(document).ready(function () {
        $('#myDropzone').dropzone({
            url:"/Aprovacoes/SaveUploadedFile",
            method: "post",
            //parameter name value
            paramName: function () { "files" },
            //clickable div id
            clickable: '#previews',
            //preview files container Id
            previewsContainer: "#previews",
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,
            //  url:"/", // url here to save file
            maxFilesize: 100,//max file size in MB,
            addRemoveLinks: true,
            dictResponseError: 'Server not Configured',
            acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg,.pdf",// use this to restrict file type
            init: function () {
                var self = this;
                // config
                self.options.addRemoveLinks = true;
                self.options.dictRemoveFile = "Delete";
                //New file added
                self.on("addedfile", function (file) {
                    console.log('new file added ', file);
                    $('.dz-success-mark').hide();
                    $('.dz-error-mark').hide();
                });
                // Send file starts
                self.on("sending", function (file) {
                    console.log('upload started', file);
                    $('.meter').show();
                });

                // File upload Progress
                self.on("totaluploadprogress", function (progress) {
                    console.log("progress ", progress);
                    $('.roller').width(progress + '%');
                });

                self.on("queuecomplete", function (progress) {
                    $('.meter').delay(999).slideUp(999);
                });

                // On removing file
                self.on("removedfile", function (file) {
                    console.log(file);
                });

                $('#Submit').on("click", function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    // Validate form here if needed

                    if (self.getQueuedFiles().length > 0) {
                        self.processQueue();
                    } else {
                        self.uploadFiles([]);
                        $('#myDropzone').submit();
                    }
                });
                self.on("successmultiple", function (files, response) {
                    // Gets triggered when the files have successfully been sent.
                    // Redirect user or notify of success.
                });
            }
        });
    })

</script>

And here is the form

@using (Html.BeginForm("SaveUploadedFile", "Aprovacoes", FormMethod.Post, new { @name = "myDropzone", id = "myDropzone", @enctype = "multipart/form-data" }))
{

<br />

<div>
    <div id="previews" class="dz-default dz-message box__input dropzone">
        <div style="text-align:center">
            <i class="fa fa-cloud-upload" style="font-size:23px;position:relative;top:4px;"></i> <span style="margin-left:20px">Drop files  to attach or browse</span>
        </div>
    </div>
</div>
<br />
<div>
    <input type="submit" id="Submit" name="Submit" class="btn btn-success m-t-5" value="Submit" />
</div>
}

My controller httpPost method

[HttpPost]
public IActionResult SaveUploadedFile(List<IFormFile> files)
{
    //do stuff
}

always come 0

enter image description here


Solution

  • This is my working solution:

    View Part

    @using (Ajax.BeginForm("YourAction", "YourController", FormMethod.Post, new AjaxOptions { HttpMethod = "POST", OnBegin = "OnBegin", OnSuccess = "OnSuccess", OnFailure = "OnFailure" }, new { @id = "ajaxForm", @enctype = "multipart/form-data" }))
    {
            <div class="card">
                <div class="card-body">
                    @Html.AntiForgeryToken()
                        <div class="col-md-12 dropzone">
                            <div class="dropzone-previews" id="dropzonePreview">
                                <i class="icon-file-upload icon-5x absolute-center text-muted"></i>
                            </div>
                        </div>
                    </div>
                    <div class="row form-group mt-3">
                        <div class="col-md-12">
                            <input class="btn btn-inverse btn-primary" id="btnSubmit" name="inputSubmit" type="submit" value="Save" />
                        </div>
                    </div>
                </div>
            </div>
    }
    

    Script Part

    Dropzone.autoDiscover = false;
    
    var options = {
        paramName: "PhotoFiles",
        addRemoveLinks: true,
        autoDiscover: false,
        autoProcessQueue: false,
        uploadMultiple: true,
        parallelUploads: 5,
        thumbnailWidth: 250,
        thumbnailHeight: 250,
        dictRemoveFile: 'Delete',
        previewsContainer: '#dropzonePreview',
        clickable: '.dropzone',
        acceptedFiles: ".jpeg,.jpg,.png",
    };
    
        var dropZone = new Dropzone("form#ajaxForm", options);
    
        dropZone.element.querySelector("input[type=submit]").addEventListener("click", function (e) {
            // Make sure that the form isn't actually being sent.
            e.preventDefault();
            e.stopPropagation();
    
            // if dropzone has file process them, if not send empty array
            if (dropZone.getQueuedFiles().length > 0) {
                dropZone.processQueue();
            } else {
                $("#ajaxForm").submit();
            }
        });
    
        dropZone.on("successmultiple", function (files, response) {
            // Gets triggered when the files have successfully been sent.
            // Redirect user or notify of success.
            OnSuccess(response);
        });
        dropZone.on("errormultiple", function (files, response) {
            // Gets triggered when there was an error sending the files.
            // Maybe show form again, and notify user of error
            OnFailure(response);
        });
    

    Controller Part

        [HttpPost]
        [ValidateAntiForgeryToken]
        public JsonResult InsertPhotos()
        {
            if (Request.Files.Count > 0)
            {
                for (int i = 0; i < Request.Files.Count; i++)
                {
                    //process files
                }
            }
    
            //return some result
            return Json(result, JsonRequestBehavior.AllowGet);
        }
    

    Hope it helps.