How to submit files to MVC Action using FormData

Question

I am creating an ASP.NET Core 6 file upload application. This is my code:

FORM

<form asp-controller="Home" asp-action="UploadFiles" method="post" enctype="multipart/form-data" id="uploadForm">
    <input type="file" class="form-control-file" multiple name="files">
    @foreach (var folder in @Model.Folders)
    {
        <input id="filePathUrl" type="radio" asp-for="Folders" value="@folder" />
        @folder
    }
<button type="submit" class="btn custom-button">Upload Files</button>

jQuery

    function processFiles(confirmOverwrite = false){
    const filePath = $("#filePathUrl").val();
    const fileList = $(".form-control-file")[0].files;
    const files = Array.from(fileList);

    let formData = new FormData();
    files.forEach(file => formData.append("files[]", file));

    const URL = '@Url.Action("UploadFiles", "Home")';

    $.ajax({
        url: URL + '?folders=' + filePath + '&confirmOverwrite=' + confirmOverwrite,
        type: 'post',
        data: formData,
        // dataType: 'json',
        contentType: false,
        processData: false,
              ...

MVC Action

       [HttpPost]
    public async Task<JsonResult> UploadFiles(IEnumerable<IFormFile> files, string folders, bool confirmOverwrite = false)
    {
        List<string> existingFiles = new();
        var filesToBeSaved = new List<(IFormFile file, string filePath)>();
        
        foreach (var file in files)
        {
            string trimmedFileName = file.FileName.Replace(" ", "");
            var filePath = Path.Combine(folders, trimmedFileName);

            if (System.IO.File.Exists(filePath) && !confirmOverwrite)
            {
                existingFiles.Add(file.FileName + "(" + trimmedFileName + ")");
            }
            else
            {
                filesToBeSaved.Add((file, filePath));
            }
        }
       ...

I have removed alot of code to keep things relevant and simple.

Why is files argument appearing as null when I submit the form??

What if you change to files.forEach(file => formData.append("files", file)); I didn't see you invoke processFiles function in your code, how do you invoke it? — Rena
– Rena, Commented Mar 15, 2022 at 5:22
@Rena Thank you so much! That did the trick. I've spent HOURS on this. Do you have an explanation for why this works? Thank you! — urizark
– urizark, Commented Mar 15, 2022 at 5:26

Rena · Accepted Answer · 2022-03-15 05:41:31Z

1

Model Binding binds the parameter by name. Your backend here IEnumerable<IFormFile> files name is files.

So you need change your code like below:

files.forEach(file => formData.append("files", file));

Besides, I know you may want to post it by array index. Only for complex list model type, you may need post like: model[index].PropertyName. Refer to here.

edited Mar 15, 2022 at 5:41

answered Mar 15, 2022 at 5:27

Rena

37.2k7 gold badges50 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to submit files to MVC Action using FormData

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related