MVC4 retrieve uploaded files

Question

I'm using ASP.NET MVC4 in order to develop an intranet application. One of the main features is to allow the user to upload files which will be stored in my database. In order to do that, I'm using jQuery. However, I have no idea what I have to do to manipulate the uploaded files. I already know that I have to manipulate them into the correspondent controller but after having read some tips on the internet, I just can't see how I am suppose to do.

Here is my view :

    @model BuSIMaterial.Models.ProductAllocationLog
@{
    ViewBag.Title = "Create";
}
<h2>Create</h2>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>ProductAllocationLog</legend>
        <div class="editor-label">
            Date :
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Date, new { @class = "datepicker"})
            @Html.ValidationMessageFor(model => model.Date)
        </div>
        <div class="editor-label">
            Message :
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(model => model.Message)
            @Html.ValidationMessageFor(model => model.Message)
        </div>
        <div class="editor-label">
            Allocation :
        </div>
        <div class="editor-field">
            @Html.DropDownList("Id_ProductAllocation", String.Empty)
            @Html.ValidationMessageFor(model => model.Id_ProductAllocation)
        </div>
        <div class="demo" style="float:left; margin-top:5px;">

            <div id="aupload" style = "border:2px dashed #ddd; width:100px; height:100px; margin-right:10px; padding:10px; float:left;"></div>
            <div id="uploaded" style = "border: 1px solid #ddd; width:550px; height:102px; padding:10px; float:left; overflow-y:auto;"></div>

        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>

I'm absolutly not asking for pre-made code samples but just for a way to proceed. It would be very kind.

score 0 · Answer 1 · edited May 23 '17 at 12:21

There are three things you need to do. First, add an image upload field to your view:

<input type="file" name="file-upload" />

..make your form 'multipart'..

@using (Html.BeginForm("Action", "Controller", null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
}

...then in your controller, access the file via the 'Files' collection on the request object:

Request.Files["file-upload"];

If you wish to submit the form with ajax/jquery, then there is a little more work to do to serialize the files. This post will help you with this: Sending multipart/formdata with jQuery.ajax

score 0 · Answer 2 · answered Feb 19 '14 at 14:51

  @model MVCDemo.Models.tbl_Images
@{
    ViewBag.Title = "Create";
}
<h2>Create</h2>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>ProductAllocationLog</legend>
        <div class="editor-label">
            Date :
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Date, new { @class = "datepicker"})
            @Html.ValidationMessageFor(model => model.Date)
        </div>
        <div class="editor-label">
            Message :
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(model => model.Message)
            @Html.ValidationMessageFor(model => model.Message)
        </div>
        <div class="editor-label">
            Allocation :
        </div>
        <div class="editor-field">
            @Html.DropDownList("Id_ProductAllocation", String.Empty)
            @Html.ValidationMessageFor(model => model.Id_ProductAllocation)
        </div>
        <div class="demo" style="float:left; margin-top:5px;">

            <div id="aupload" style = "border:2px dashed #ddd; width:100px; height:100px; margin-right:10px; padding:10px; float:left;"></div>
            <div id="uploaded" style = "border: 1px solid #ddd; width:550px; height:102px; padding:10px; float:left; overflow-y:auto;"></div>

        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>

MVC4 retrieve uploaded files

2 Answers2