Objetivo: deseo publicar una imagen de la vista en el controlador usando un modelo.

Problema: al agregar los datos del formulario al método ajax, dice:

"TypeError no detectado: no se pudo construir 'FormData': el parámetro 1 no es del tipo 'HTMLFormElement'".

Lo que probé: busqué en Google y probé HttpPostedFileWrapper como el tipo de datos en el modelo, y dice que no existe. También probé lo que dice el error que debería ser, pero eso tampoco existe.

Estoy usando Framework 5 Asp.net core MVC

Modelo:

 using Microsoft.AspNetCore.Http; using System.Web; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using System.Drawing; namespace AirmotionEcommerceWebsite.Models.Admin { public class AddWebProductModel { public TwebProduct product { get; set; } public HttpPostedFileWrapper ThumbnailImageFile { get; set; } } }

JavaScript:

 var UploadForm = function () { var thumbnail = $("#Thumbnailbrowse").get(0).files; var data = new FormData(this); data.append("ThumbnailImageFile", thumbnail[0]); $.ajax({ type: "Post", url: "/admin/ProductAdd", data: data, contentType: false, processData: false, success: function (response) { } }); };

Error:

 Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'. at UploadForm (ProductAdd:494) at HTMLInputElement.onclick (ProductAdd:396) UploadForm @ ProductAdd:494 onclick @ ProductAdd:396

Producto completoAñadir vista:

 @model AirmotionEcommerceWebsite.Models.Admin.AddWebProductModel @{ ViewBag.Title = "ProductAdd"; Layout = "~/Views/Shared/_AdminLayoutPage.cshtml"; } <style> .PreviewImageThingy{ height: 10em; } </style> <h2>Add a Product</h2> <link href="~/css/Chosen/chosen.min.css" rel="stylesheet" /> <script src="~/js/Chosen/chosen.jquery.min.js"></script> @using (Html.BeginForm("ProductAdd", "Admin", FormMethod.Post, new { @enctype = "multipart/form-data" })) { @*@Html.AntiForgeryToken()*@ <div class="form-horizontal"> <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) @Html.HiddenFor(Model => Model.product.IntWebProductId) @Html.HiddenFor(Model => Model.product.BlnIsDeleted) @Html.HiddenFor(Model => Model.product.DteCreated) <div class="form-group"> <h5>Product Name</h5> <div class="col-md-10"> @Html.EditorFor(model => model.product.StrProductName, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.product.StrProductName, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> <div class="form-group"> <h5>Tags</h5> <div class="col-md-10"> @* Stuff here *@ @Html.ListBoxFor(Model => Model.product.SelectedIDArray, new MultiSelectList(ViewBag.TagsList, "IntWebTagId", "StrTagName"), new { @class = "chzn-select", multiple = "multiple" }) </div> </div> </div> <div class="form-group"> <h5>Thumbnail Image</h5> <div class="col-md-10"> <input type="file" id="Thumbnailbrowse"> <div id="imgPreview" class="thumbnail" style="display:none"> <img class="img-responsive PreviewImageThingy" id="targetImg" /> <div class="caption"> <a href="#" onclick="ClearPreview()"><i class="glyphicon glyphicon-trash"></i></a> <span id="description"></span> </div> </div> </div> </div> <div class="form-group"> <h5>Images</h5> <div class="col-md-10"> <h5>Upload Images</h5> <input type="file" multiple id="Item-Gallary-photo-add"> <div class="gallery"></div> </div> </div> <div class="form-group"> <h5>Is Product Active?</h5> <div class="col-md-10"> <div class="checkbox"> @Html.EditorFor(model => model.product.BlnIsActive) @Html.ValidationMessageFor(model => model.product.BlnIsActive, "", new { @class = "text-danger" }) </div> </div> </div> <div class="form-group"> <h5>Featured Item</h5> <div class="col-md-10"> <div class="checkbox"> @Html.EditorFor(model => model.product.BlnIsFeatured) @Html.ValidationMessageFor(model => model.product.BlnIsFeatured, "", new { @class = "text-danger" }) </div> </div> </div> <div class="form-group"> @{ List<SelectListItem> dataItems = ViewBag.InventoryItemList; } <div class="form-group"> <h5>Inventory System Item</h5> <div class="col-md-10"> @Html.DropDownListFor(model => model.product.IntItemId, dataItems, "-- Select --", new { @class = "form-control" }) @Html.ValidationMessageFor(model => model.product.IntItemId, "", new { @class = "text-danger" }) </div> </div> </div> <div class="form-group"> <h5>MSRP</h5> <div class="col-md-10"> @Html.EditorFor(model => model.product.DecMsrp, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.product.DecMsrp, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> <h5>Description</h5> <div class="col-md-10"> @Html.EditorFor(model => model.product.StrDescription, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.product.StrDescription, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> <h5>Specs</h5> <table class="table table-bordered table-hover"> <tbody> <tr> <th scope="row">Static Pressure in Inches wg</th> <td>@Html.EditorFor(x => x.product.StrStaticPressureIn)</td> </tr> <tr> <th scope="row">Air Volume (CFM)</th> <td>@Html.EditorFor(x => x.product.StrCfm)</td> </tr> <tr> <th scope="row">Noise (sones)</th> <td>@Html.EditorFor(x => x.product.StrNoise)</td> </tr> <tr> <th scope="row">Fan Watts</th> <td>@Html.EditorFor(x => x.product.StrWatts)</td> </tr> <tr> <th scope="row">Duct Diameter</th> <td>@Html.EditorFor(x => x.product.StrDiameter)</td> </tr> <tr> <th scope="row">Power Rating</th> <td>@Html.EditorFor(x => x.product.StrPowerRating)</td> </tr> </tbody> </table> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" name="Submit" class="btn btn-primary" onclick="UploadForm()" /> </div> </div> </div> }