I am creating a bootstrap modal to insert form data input along with image. Passing form input data to the controller is not problem but having problem with passing image to controller method.
I am getting image path as : C:\fakepath\image.PNG
@*============ modal for data insert ==================*@
<div class="modal fade" id="insert_firm_modal" role="dialog" aria-hidden="true" tabindex="-1" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-xlg" role="document">
<div class="modal-content" id="insert_firm_modal_content">
<form id="form_firm_data" enctype="multipart/form-data" method="POST">
@Html.AntiForgeryToken()
<div class="modal-header">
<button type="button" class="btn-close" data-dismiss="modal" style="float:right;" aria-label="Close"><span aria-hidden="true">×</span></button>
<span>@(Model.FirmId > 0 ? "Update":"New")</span>
</h4>
</div>
<div class="modal-body">
@Html.HiddenFor(f => f.FirmId)
@*====== form ===========*@
<fieldset>
// input data....
<div class="row">
<div class="col-md-4">
<div class="form-group ">
<label class="required title_header">Image</label>
<input type="file" class="form-control" id="i_image" required name="ImageTitle" accept="image/*">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div id="i_imagePrvw" class="thumbnail" style="display:none">
<img class="img-responsive" id="i_targetImg" style="display:block; object-fit:fill;height:140px;width:120px;" />
<div class="caption">
<a href="#" onclick="clearPreview()"><i class="glyphicon glyphicon-trash"></i></a>
<p id="description"></p>
<p id="i_full_path"></p>
</div>
</div>
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</fieldset>
</div>
<div class="modal-footer">
<button type="button" class="btn-sm" data-dismiss="modal"><span aria-hidden="true">Cancel</span></button>
<input type="submit" value="Create" class="btn btn-default" id="btn_submit"/>
</div>
</form>
</div>
</div>
</div>
script::
<script>
$(document).ready(function () {
$('#btn_submit').click(function () {
var testModel = {
// passing form input data,
ImageFile: $('#i_image').val(),
ImageTitle: $('#i_image').val(),
ImagePath: $('#i_image').val()
};
$.ajax({
type: "POST",
url: "/FirmModels/Create",
data: JSON.stringify(testModel),
contentType: "application/json;charset=utf-8",
dataType: 'json',
success: function (response) {
if (response.success) {
console.log(response.responseText);
}
},
error: function (response) {
alert("failed...");
}
})
return false;
})
})
</script>
Passing image via post method works using HttpPostedFileBase in controller method, but it does not work with bootstrap modal.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create( CompanyModel vdm_, HttpPostedFileBase n_image)
So how can I pass selected image to controller method.