pass selected image upload by the user via bootstrap modal to controller method

Viewed 105

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">&times;</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.

0 Answers
Related