Formdata multiple file upload

Question

My form

@using (Html.BeginForm("ViewProjectAssignment", "AssignmentOfProject", FormMethod.Post, new { enctype = "multipart/form-data", @id="formAssignment" }))
{
    @Html.AntiForgeryToken()
    <table class="headertable">            
        <tbody>
            <tr>
                <td style="padding-left:50px; width:120px;">
                    <b>Project Name</b>
                </td>
                <td>
                    @Html.DropDownListFor(mod => mod.ProjectName, Model.ProjectNameList, new { @class = "textBoxDisplay", @id = "ddlProjectName", style = "width:300px;" })
                    @Html.ValidationMessageFor(x => x.ProjectName)
                </td>
            </tr>
            <tr>
                <td style="padding-left:50px; width:120px;">
                    <b>CEQR Number</b>
                </td>
                <td>
                    @Html.DropDownListFor(mod => mod.CEQRNumber, Model.CEQRNumberList, new { @class = "textBoxDisplay", @id = "ddlCEQRNumber" })
                    @Html.ValidationMessageFor(x => x.CEQRNumber)
                </td>
            </tr>
            <tr>
                <td style="padding-left:50px; width:120px;">
                    <b>Upload File</b>
                </td>
                <td>
                    @Html.TextBoxFor(mod => mod.File, new { @class = "textBoxFileDisplay", style = "width:600px;", type = "file", multiple = "true", @id = "txtFiles" })
                    @Html.ValidationMessageFor(x => x.File)
                </td>
            </tr>
            <tr>
                <td style="padding-left:50px; width:120px;"></td>
                <td>
                    <button name="button" class="button" value="UploadFile" id="btnUploadFiles">
                        Upload File
                    </button>                        
                    &nbsp;
                    <button name="button" value="create" class="button" id="btnClearSeach">
                        Clear
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
}

Jquery

$('#btnUploadFiles').click(function (event) {
        fnBlockUI();
        event.preventDefault();
        var data = new FormData();

        // add project Name, CeqrNumber and files to form here

        $.ajax({
            url: '@Url.Action("ViewProjectAssignment", "AssignmentOfProject", new { Area = "PrivateCEQRApplication" })',
            type: 'POST',
            dataType: 'json',
            cache: false,
            headers: headers,
            data: data,                
            success: function (result) {
                $.unblockUI();
                $('body').empty().append(result);
            },
            error: function (xhr, textStatus, errorThrown) {
                $.unblockUI();
                alert("An error occurred while processing your request. Please try again. If the error persists, please email the account administrator .");
            }
        });
    });

Controller Method

[HttpPost]
public ActionResult ViewProjectAssignment(ProjectUploadFiles uploadFiles)
{
    // Upload code here
}

Model

public class ProjectUploadFiles
{
    public string CEQRNumber { get; set; }

    public string ProjectName { get; set; }

    public IEnumerable<HttpPostedFileBase> File { get; set; }
}

Issue

My application allows user to upload multiple files against CEQRNumber and corresponding ProjectName. btnUploadFiles click event makes ajax post, passing selected CEQRNumber, ProjectName and the attached Files to the controller.

I want to use Formdata() for upload. I was able to upload a single file with no another parameters but i am not sure how can i pass multiple files and other parameter as formdata to my controller to be resolved as model.

[HttpPost]
public ActionResult ViewProjectAssignment(ProjectUploadFiles uploadFiles)
{
    // Upload code here
}

This question by me here and answer by Darin might give you some idea on multiple file uploads. — Guruprasad J Rao
– Guruprasad J Rao, Commented Oct 16, 2015 at 18:18

Musa · Accepted Answer · 2015-10-16 19:34:28Z

Why not initialize the form data with the form itself?
Are there fields inside the form you don't want to send? Are there fields outside of the form you want to send?

    $('#btnUploadFiles').click(function (event) {
        fnBlockUI();
        event.preventDefault();
        var data = new FormData($('#formAssignment')[0]);

        $.ajax({
            url: '@Url.Action("ViewProjectAssignment", "AssignmentOfProject", new { Area = "PrivateCEQRApplication" })',
            type: 'POST',
            dataType: 'json',
            cache: false,
            headers: headers,
            data: data,  
            contentType: false,
            processData: false,              
            success: function (result) {
                $.unblockUI();
                $('body').empty().append(result);
            },
            error: function (xhr, textStatus, errorThrown) {
                $.unblockUI();
                alert("An error occurred while processing your request. Please try again. If the error persists, please email the account administrator .");
            }
        });
    });

Collectives™ on Stack Overflow

Formdata multiple file upload

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