0

I have the following code:

            <div class="form-group">
                <label for="bandname">Band name:</label>
                <input class="form-control" id="Name" name="Name" type="text">
            </div>
            <div class="form-group">
                <label for="genre">Genre(loop out from table  in database):</label>
                <input class="form-control input-lg" id="Genre" name="Genre" type="text">
            </div>
            <div class="form-group">
                <label for="coverpic">Cover picture:</label>
                <input type="file" name="file" id="CoverPicture" style="width: 100%;" />
            </div>
            <div class="form-group">
                <label for="banddescription">Band description::</label>
                <input class="form-control input-sm" name="Description" id="Description" type="text">
            </div>
            <p><button type="submit" id="createProfilee" class="btn_style_1 btn" style="max-width: 100%;">Create</button></p>
        </div>
<script>
        var formData = new FormData();
        formData.append('file', $('input[type=file]')[0].files[0]);
        var Name = $('#Name').val();
        var Genre = $('#Genre').val();
        var CoverPicture = formData;
        var BandDescription = $('#Description').val();

            $.ajax({
                url: 'http://localhost:65148/Home/BandRegister',
                data: {
                    'name': Name,
                    'genre': Genre,
                    'coverPicture': CoverPicture,
                    'description': BandDescription
                },
                cache: false,
                type: "POST",
                dataType: "text",
                success: function (data, textStatus, XMLHttpRequest) {
                    console.log(val);
                },
                error: function (data, textStatus, XMLHttpRequest) {
                    console.log(data);
                }
            });
</script>

Here is my controller:

public ActionResult BandRegister(string name, string genre, HttpPostedFileBase coverPicture, string description)
{
    //Upload file here
    if (!ModelState.IsValid)
    {
        return View("SetupNewProfile");
    }
}

How can treat the file that user enterd as a HttpPostedFileBase and then upload It here?

When I run the code, I get the following javascript error:

TypeError: 'append' called on an object that does not implement interface FormData.

Bryan
  • 3,421
  • 8
  • 37
  • 77
  • The default ModelBinder does not apply to multipart requests (aka file uploads) you need to use Request.Files and Request.Params to get the data out. See the question I marked as duplicate for more details. – Rory McCrossan Mar 05 '16 at 20:38
  • @RoryMcCrossan: Thank you. But what type should I use In my controller for the file-upload? String? What kind of data type Is Request.Files? – Bryan Mar 05 '16 at 20:41
  • It's a HttpFileCollection: https://msdn.microsoft.com/en-us/library/system.web.httprequest.files(v=vs.110).aspx – Rory McCrossan Mar 05 '16 at 20:42

0 Answers0