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

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

CodePudding user response：

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.