IFormFile not being populated by dropzone uploadMultiple request

Question

The problem I am having is that the List of IFormFile is not being populated with the given files but when i call HttpContext.Request.Form.Files; then I have access to the files. I would prefer to use IFormFile as it seems to be new Dotnet core 2.0 way of doing things.

I have the following request payload:

With the following request headers:

And Razor pages handler:

public async Task<ActionResult> OnPostSend(ConditionResponse conditionResponse)
    {
        var files = HttpContext.Request.Form.Files;
    }

Condition response model:

public class ConditionResponse
{
    public List<string> Plots { get; set; }

    public string Comments { get; set; }

    public List<IFormFile> Files { get; set; }
}

Adachi

Hi , I am having the same issue. Can you please paste your entire code here – Contradance

You should not need the entire code. The answer below shows how in the JS you just need to use the paramName option. Be sure you are naming the IFormFile the same as the string returned from myParamName. – Adachi

Answer 1

After looking at the request from a html5 multiple file upload I noticed the request does not add the indexes to the filename (files[n]). Dropzone.js does this so there is a work around. If you add the paramName option to Dropzone JS config and have it call a method which returns files you will get the same behaviour as the html5 multiple file upload.

function myParamName() {
                return "files";
            }

 Dropzone.options.myDropzone = {
                uploadMultiple: true,
                paramName: myParamName,
}

Adachi

That worked perfectly! Thank you. Could you explain why does this work? and how did you discovered it? – Latin

Thanks for this answer, I've been trying to get it to work for a while now! This should really be added to the Dropzone docs – Appetite

@m.brookson no problem, if the answer worked for you could you give an upvote please – Adachi

@m.brookson no problem, if the answer worked for you cand if you believe the question is useful then could you also upvote these, thanks – Adachi

Answer 2

The accepted answer worked perfectly, I am not sure why and how, but it works. I just wanted to get rid of that additional function, i.e., we can use it like this:

 Dropzone.options.myDropzone = {
                uploadMultiple: true,
                paramName: () => "files",
}

Or if old browsers are also targeted:

 Dropzone.options.myDropzone = {
                uploadMultiple: true,
                paramName: function () { "files" },
}

Latin

Yes great suggestion. Worth mentioning this will only work with es6 compatible browser versions. – Adachi

@LiverpoolOwen, do you have any explanation why does this work? – Latin

When DropzoneJs sends the reuqest it adds an index to each file for example files[0], files[1], files[2] where as the IFormFile expects the exact same name for files for example files, files, files – Adachi

@LiverpoolOwen, yes, I just meant why passing a reference to a function works? – Latin