Bind value to model in Asp.Net MVC Application

Question

In my model i have a HttpPostedFileBase property as File. In the view I have a textbox "A" and a button "B". I also have a hidden input type="file" id ="file "on my page. On B click i trigger the #file.click in my javascript. The selected file should then bind to the model property and the file name should be displayed on the textbox. I am unable to do this. Any help? I hope the question is clear, if not please tell me so that i can elaborate further.

Any help?

Edit 1:

Model:

public class FileUploadModel
    {
        public HttpPostedFileBase File { get; set; }
        public string FileName {get;set;}
    }

View:

<script type="text/javascript">
    $(document).ready(function () {

        $("#Browse").click(function () {

            $("#fileIputType").trigger('click');

           //now the file select dialog box opens up
          // The user selects a file
          // The file should get associated with the model property in this view
          // the textbox should be assigned the filename 

        });
    });
</script>


    @Html.TextBox("fileTextBox", Model.FileName, new { id = "fileTextBox" })

        <input type="button" id="Browse" name="Browse" value="Browse" />

        <input type="file" id="fileInputType" style="visibility:hidden"/> 

        @Html.Hidden("ModelType", Model.GetType())

  //How can i bind the selected file to the model property ( public HttpPostedFileBase File )

In your script, you have $("#fileIputType") but in your html you have id="fileInputType" — charlieparker, Nov 07 '13 at 11:38
@charlieparker so? its an id...thats how we access it, isnt it? — Why, Nov 07 '13 at 11:43
I think its displayed to the textbox but you can't see it because its hidden?? — WannaCSharp, Nov 07 '13 at 11:46
the textbox is not hidden, the file select is hidden, and the more important question is why not it is getting binded — Why, Nov 07 '13 at 11:47
kewal, my point was that you have a typo when you access it. You're missing the letter "n" in $("#fileIputType"). Iput != Input. If you retyped your code here it's probably not actually causing a problem, but if you copied and pasted it... — charlieparker, Nov 07 '13 at 12:32

WannaCSharp · Accepted Answer · 2013-11-07T12:05:39.963

1

Assign File to the name property of your file input

    <input type="file" name="File" id="fileInputType" style="visibility:hidden"/>

And this would bind to HttpPostedFileBase file parameter in your action method when you submit the form.

Edit:

Remeber to set your form's entype to multipart/form-data

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

edited Nov 07 '13 at 12:05

answered Nov 07 '13 at 11:52

WannaCSharp

1,898
2
13
19

Did you set the form's enctype to multipart/form-data? Check my edit – WannaCSharp Nov 07 '13 at 12:06
Do you have `FileUploadModel` as your parameter or just `HttpPostedFileBase` ? – WannaCSharp Nov 07 '13 at 12:09
Try accepting `HttpPostedFileBase` as your parameter if it will work. – WannaCSharp Nov 07 '13 at 12:11
hmm..will try...thanks for your patience...btw gotta run an important errand...will get back to you with the results – Why Nov 07 '13 at 12:13
hi...can you look into this http://stackoverflow.com/questions/19855836/bind-value-to-model-in-asp-net-mvc-application-part-2 – Why Nov 08 '13 at 09:51

Murali Murugesan · Answer 2 · 2013-11-07T11:49:43.373

0

You can't set the input type='file' elements value property in javascript programatically.

Why dont you show the File name as a label text? Have a FileName property in your model(viewmodel) class

@model MyViewModel

{

<label>@Model.FileName</label>
}

EDIT:

Based on your code

public class FileUploadModel
{
    public HttpPostedFileBase File { get; set; }
    public string FileName {get;set;}
}

In view

 @Html.TextBoxFor(m => m.File, new { type = "file" })

In Controller

    using (MemoryStream memoryStream = new MemoryStream())
    {
        model.File.InputStream.CopyTo(memoryStream);
    }

edited Nov 07 '13 at 11:49

answered Nov 07 '13 at 11:12

Murali Murugesan

22,423
17
73
120

i dont want to set the input type='file' elements value property in javascript. I just want to display in the textbox the name of the file . And i want to bind the file selected by input type = "file" to the model property – Why Nov 07 '13 at 11:26
@kewal, for have File as FileStream property in model and also FileName property for TextBox and use both – Murali Murugesan Nov 07 '13 at 11:35
i am unable to bind and i get null when i debug it in the controller – Why Nov 07 '13 at 11:44
@kewal, check how to bind `File` element with model – Murali Murugesan Nov 07 '13 at 11:44
i tried...unable to find anything concrete...can you point in the right direction maybe – Why Nov 07 '13 at 11:49
@kewal check [this](http://stackoverflow.com/questions/304617/html-helper-for-input-type-file) and [this](http://stackoverflow.com/questions/4784225/mvc-3-file-upload-and-model-binding) – Murali Murugesan Nov 07 '13 at 11:50
checking now...will get back to you – Why Nov 07 '13 at 11:52
hi...can you look into this http://stackoverflow.com/questions/19855836/bind-value-to-model-in-asp-net-mvc-application-part-2 – Why Nov 08 '13 at 09:51

Bind value to model in Asp.Net MVC Application

2 Answers2

Linked