Assigning JavaScript value to mvc model property

Question

I am using asp.net mvc application and trying to upload an image.

This is uploading image function

$(document).ready(function () { TableDatatablesEditable.init(); $("#UploadImg").change(function () { var data = new FormData(); var files = $("#UploadImg").get(0).files; if (files.length > 0) { data.append("MyImages", files[0]); } $.ajax({ url: "@Url.Action("UploadFile")", type: "POST", processData: false, contentType: false, data: data, success: function (response) { $("#HeaderInput").text('/Upload/' + response); $("#imgPreview").attr('src', '/Upload/' + response); }, error: function (er) { alert(er); } }); }); });

Here i am displaying the uploaded image

 @Html.Label("Logo Upload", new { @class = "col-md-3 control-label" }) <div class="col-md-7"> <input type="file" class = "col-md-3 control-label" id="UploadImg" value="@Model.FundDetail.ImagePath" name="@Model.FundDetail.ImagePath" /> <br /><br /> <br /> </div> </div>

The image uploading is working fine but values are not assigning to the model's property "@Model.FundDetail.ImagePath"

How can i assign value from javascript. Can anyone suggest me how to do this.

Thanks in advance

You cannot assign a value to a file input (for security reasons) - the only way it can be set is by the user selecting a file. but what are you trying to do with this code? (having name="@Model.FundDetail.ImagePath" makes no sense) — user3559349
– user3559349, Commented Nov 24, 2016 at 5:41
i have a create profile page which has upload image button with other inputs. so when the submit button is clicked then it should save the user information with image. So do you mean when the image is selected then I should save the image — Owais Ahmed
– Owais Ahmed, Commented Nov 24, 2016 at 5:44
Either then, or when you post the form with the other inputs (not clear why your using ajax to upload the file). Your view model should have a property (say) HttpPostedFileBase Image and then the file input will be @Html.TextBoxFor(m => m.Image, new { type = "file" }) and it will all be correctly bound — user3559349
– user3559349, Commented Nov 24, 2016 at 5:48
Because I want to display the uploaded image as well that is why i am using ajax — Owais Ahmed
– Owais Ahmed, Commented Nov 24, 2016 at 5:51
You mean you want to display it in the same view (i.e. as soon as the user selects an image, then upload and save it and display a preview of it)? — user3559349
– user3559349, Commented Nov 24, 2016 at 5:53

user3559349 · Accepted Answer · 2016-11-25 00:40:26Z

You cannot set the value attribute of a file input for security reasons. The only way it can be set is by the user selecting a file in the browser.

In your form, include a hidden input for the file name

@Html.HiddenFor(m => m.FundDetail.ImagePath)

and change the file input to

<input type="file" class = "col-md-3 control-label" id="UploadImg" />

Then in the ajax call where you upload the file and return the saved path, update the value of the hidden input in the success callback

$.ajax({ .... success: function (response) { $("#HeaderInput").text('/Upload/' + response); $("#imgPreview").attr('src', '/Upload/' + response); // Set the value of the hidden input $('#FundDetail_ImagePath').val(response); }, .... });

Now when your submit the form, the ImagePath property will be populated with the saved path of the file which can then be saved to the database.

Collectives™ on Stack Overflow

Assigning JavaScript value to mvc model property

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related