0

I have found a few things that are similar but now quite showing how to do it.. and I'm having problems adopting what I've found to my situation. I'm trying to pass multiple images and text to a webservice to then save to db/amazon.

This is what I have so far...

The Form

<form class="create-status" enctype="multipart/form-data">
    <div class="row">
        <div class="col-sm-12">
            @Html.TextAreaFor(model => model.status, new { cols = "1", rows = "1", @class = "form-control no-max-width input-sm", id = "tbStatus", placeholder = "Beep Here", req = "tbStatus" })
        </div>
    </div>
    <div class="row collapse" id="divStatusInputs">
        <br />
        <div class="col-sm-6">
            <div class="row">
                <div class="col-sm-3">
                    <a class="icon"><span id="spanImageInput" class="glyphicon glyphicon-camera glyphicon-camera-input icon"></span></a>
                    <input id="imageInput" multiple type="file" class="hidden" name="files" />
                </div>
            </div>
        </div>
        <div class="col-sm-6 text-right">
            <div class="text-right">
                <button id="btnCancel" class="btn btn-default" type="button">Cancel</button>
                <a id="aSubmitStatus" class="btn btn-primary">Submit</a>
                <input id="btnSubmitStatus" type="submit" class="btn hidden" />
            </div>
        </div>
    </div>
</form>

And the jQuery/Javascript..

function CreateStatus() {
    var status = $('#tbStatus').val();
    var formData = new FormData();


    var data = {
        files: "", //this is where i'm having the issue? I'm not sure what to do here. 
        status: status
    }

    $.ajax({
        type: 'POST',
        url: '/Webservices/StatusWebService.asmx/CreateStatus',
        data: JSON.stringify(data),
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (result) {
            console.log(result.d);
        },
        error: function (errorThrown) {
            console.log(errorThrown);
        }
    });
}

And the webservice

 [WebMethod]
 [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
 public async Task<string> CreateStatus(string status, IEnumerable<HttpPostedFileBase> files)
 {
      //everything here needed to save to db/amazon s3
 }

If I remove the HttpPostedFileBase and associated code, I'm able to call the webservice just fine, just having issues passing the proper files/images to the webservice.

Any help is greatly appreciated!!

Humpy
  • 1,964
  • 2
  • 19
  • 44
  • Take a look at [Jquery ajax form submit that contains files](http://stackoverflow.com/questions/34603739/jquery-ajax-form-submit-that-contains-files/34604232) – Shyju Apr 23 '16 at 01:21
  • Look at [this usage](http://stackoverflow.com/a/21045034/4403297) of ```FormData()``` to upload files via AJAX. – Connor Apr 23 '16 at 01:33
  • Refer also [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) –  Apr 23 '16 at 01:50

0 Answers0