0

Has anyone has an example using WebImage.GetImageFromRequest(); and Jquery to retrieve the file content?

I have this form and works fine without using Jquery. But after implementing Jquery I cannot retrieve data out of my object nor can get the file that I retrieved using WebImage.GetImageFromRequest helper.

I have seen a lot of examples utilising Jquery retriving just files, but not an example where I can retrieve data's object AND the file helper (WebImage.GetImageFromRequest();)

Html

                <form action="" class="form-validate form-horizontal" id="form" method="POST" enctype = "multipart/form-data">
                    <div class="form-horizontal">
                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                        <div class="form-group">
                            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                                </div>
 <div class="form-group">
                                @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
                                </div>
                       <div class="form-group">
                                @Html.LabelFor(model => model.ImagenArchivoFoto, htmlAttributes: new { @class = "control-label col-md-2" })
                                <div class="row">
                                    <div class="col-md-6">@Html.TextBoxFor(model => model.GetFile, new { @class = "form-control", @id = "txtUbic2", @readonly = "readonly" })</div>
                                    <div class="col-md-2"><input type="button" class="btn btn-default" value="..." id="btnUbic2" /></div>
                                    <input type="file" name="ImagenArchivoFoto" id="GetFile" value="" style="display:block;height:0;width:0;" />
                                </div>
                            </div>

Jquery

var user= new Object();
        user.Name= $("#Name").val();
        user.LastName= $("#LastName").val();
        $.ajax({
            type: 'POST',
            method: 'POST',
            url: '/Users/Create/',
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            data: user,
            success: function (data) {
                if (data.ErrorStatus == 0) {
                    $.notify({
                        message: data.NotifyMessage
                    }, {
                        type: "success",
                        delay: 5000,
                        animate: {
                            enter: 'animated fadeInDown',
                            exit: 'animated fadeOutUp'
                        }
                    });

.net

        [HttpPost]
        public async Task<JsonResult> Create(CreateUsuarerViewModel  user)
        {
          user.GetFile= WebImage.GetImageFromRequest();
         }
Gustavo García
  • 1
  • 3
  • You do not have any file input in your form - the only thing your sending is the values of the 2 textboxes –  Mar 15 '18 at 02:18
  • I just edited and added the missing code. – Gustavo García Mar 15 '18 at 16:36
  • If you want to post back a model and a file using ajax, then you need to use `FormData` - refer [How to append whole set of model to formdata and obtain it in MVC](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681). And there is no need at all to use `WebImage.GetImageFromRequest()` - you bind to a `[HttpPostedFileBase]` property in your view model. –  Mar 15 '18 at 21:13
  • Thank you so much Stephen Muecke. That's what I want mate!!!! – Gustavo García Mar 15 '18 at 22:02

0 Answers0