javascript - DropZone.js Uploading multiples files using ASP.Net MVC - Stack Overflow

I'm using a javascript library DropZone.js but uploading multiples files is somehow not working with ASP.Net MVC.

The one that works is when I set the Dropzone option "autoProcessQueue: true" and the MVC Controller argument name "inputFiles" can see the input files does successfully uploads to server. However, this means the uploading of images happens automatically and users has no chance to click the forms submit button. (I think that is why they call it DROPZone - auto uploads)

Anyways, I wanted to let users click the submit button before any uploads happens so I set the option "autoProcessQueue: false", but on form submit the argument name "inputFiles" at Controller always returns null.

        <form action="/home" method="post" enctype="multipart/form-data" class="dropzone dz-clickable form-horizontal form-bordered" id="dropzoneForm">
            <div class="form-group form-actions">
                <div class="col-md-9 col-md-offset-4">
                    <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-floppy-o"></i> Upload</button>
                </div>
            </div>
        </form>

<script>
    $(function () {
        Dropzone.options.dropzoneForm = {
            paramName: "inputFiles", // The name that will be used to transfer the file
            autoProcessQueue: true,
            uploadMultiple: false,
            parallelUploads: 100,
            accept: function (file, done) {
                done();
            }
        };
    });
</script>



[HttpPost]
    public ActionResult Index(IEnumerable<HttpPostedFileBase> inputFiles)
    {
        string fName = "";

        foreach (HttpPostedFileBase fileName in inputFiles)
        {
            HttpPostedFileBase file = fileName;
            //Save file content goes here
            fName = file.FileName;
            if (file != null && file.ContentLength > 0)
            {

                var originalDirectory = new DirectoryInfo(string.Format("{0}Images\\WallImages", Server.MapPath(@"\")));

                string pathString = System.IO.Path.Combine(originalDirectory.ToString(), "imagepath");

                var fileName1 = Path.GetFileName(file.FileName);

                bool isExists = System.IO.Directory.Exists(pathString);

                if (!isExists)
                    System.IO.Directory.CreateDirectory(pathString);

                var path = string.Format("{0}\\{1}", pathString, file.FileName);
                file.SaveAs(path);
            }

        } 

        return View();
    }

Any one tried using DropZone.js?

I'm using a javascript library DropZone.js but uploading multiples files is somehow not working with ASP.Net MVC.

The one that works is when I set the Dropzone option "autoProcessQueue: true" and the MVC Controller argument name "inputFiles" can see the input files does successfully uploads to server. However, this means the uploading of images happens automatically and users has no chance to click the forms submit button. (I think that is why they call it DROPZone - auto uploads)

Anyways, I wanted to let users click the submit button before any uploads happens so I set the option "autoProcessQueue: false", but on form submit the argument name "inputFiles" at Controller always returns null.

        <form action="/home" method="post" enctype="multipart/form-data" class="dropzone dz-clickable form-horizontal form-bordered" id="dropzoneForm">
            <div class="form-group form-actions">
                <div class="col-md-9 col-md-offset-4">
                    <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-floppy-o"></i> Upload</button>
                </div>
            </div>
        </form>

<script>
    $(function () {
        Dropzone.options.dropzoneForm = {
            paramName: "inputFiles", // The name that will be used to transfer the file
            autoProcessQueue: true,
            uploadMultiple: false,
            parallelUploads: 100,
            accept: function (file, done) {
                done();
            }
        };
    });
</script>



[HttpPost]
    public ActionResult Index(IEnumerable<HttpPostedFileBase> inputFiles)
    {
        string fName = "";

        foreach (HttpPostedFileBase fileName in inputFiles)
        {
            HttpPostedFileBase file = fileName;
            //Save file content goes here
            fName = file.FileName;
            if (file != null && file.ContentLength > 0)
            {

                var originalDirectory = new DirectoryInfo(string.Format("{0}Images\\WallImages", Server.MapPath(@"\")));

                string pathString = System.IO.Path.Combine(originalDirectory.ToString(), "imagepath");

                var fileName1 = Path.GetFileName(file.FileName);

                bool isExists = System.IO.Directory.Exists(pathString);

                if (!isExists)
                    System.IO.Directory.CreateDirectory(pathString);

                var path = string.Format("{0}\\{1}", pathString, file.FileName);
                file.SaveAs(path);
            }

        } 

        return View();
    }

Any one tried using DropZone.js?

• javascript
• asp
• asp-mvc
• asp-mvc-4
• dropzone.js

Share Follow asked Jun 26, 2015 at 18:17 imperialximperialx 14311 gold badge33 silver badges1515 bronze badges 1

• 1 OK, solved it. github./enyo/dropzone/wiki/Combine-normal-form-with-Dropzone just include the initialization (init: function() {...}) at dropzone options – imperialx Commented Jun 27, 2015 at 5:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Instead of using parameters in your action, you can use this:

[HttpPost]
public ActionResult Index()
{
    string fName = "";

    foreach (var fileName in Request.Files.AllKeys)
    {
        var file = Request.Files[fileName];
        //Save file content goes here
        fName = file.FileName;
        if (file != null && file.ContentLength > 0)
        {

            var originalDirectory = new DirectoryInfo(string.Format("{0}Images\\WallImages", Server.MapPath(@"\")));

            string pathString = System.IO.Path.Combine(originalDirectory.ToString(), "imagepath");

            var fileName1 = Path.GetFileName(file.FileName);

            bool isExists = System.IO.Directory.Exists(pathString);

            if (!isExists)
                System.IO.Directory.CreateDirectory(pathString);

            var path = string.Format("{0}\\{1}", pathString, file.FileName);
            file.SaveAs(path);
        }

    } 

    return View();
}

and so on... not sure if it work.. can't try it out but the idea is usign

Request.Files

Hope this helps!

The solution that 'Paul Sanchez' pointed it, will never worked !! According to the Dropzone.js documentations, it says that:

"If you set autoProcessQueue to false, then .processQueue() is never called implicitly. This means that you have to call it yourself when you want to upload all files currently queued."

In your case, because you never call the .processQueue() in the client-side after you disabled autoprocess with "autoProcessQueue: false", dropzone.js never process the files so the inputFiles argument will be null.

I described how to prevent auto process queue, and submit all over the form whenever you want as the following post:

https://stackoverflow./a/33880338/5208058