0

Here is my model:

public int DiscountAvailable { get; set; }
public string Color { get; set; }
public string Size { get; set; }
public int Stock { get; set; }
public String Other1 { get; set; }
public string Other2 { get; set; }
public byte[] Image { get; set; }

Here is my controller:

public JsonResult Add(Products Product)
{
    return Json(ProductDB.Add(Product), JsonRequestBehavior.AllowGet);
}

Here is my ADO to connect with database:

int i;

using (SqlConnection con = new SqlConnection(cs))
{
    con.Open();

    SqlCommand cmd = new SqlCommand();
    string query = "Insert into Products (CategoryId, SubCategoryId, DiscountAvailable, Stock, Color, Size, Other1, Other2) values(@CatId, @SubCatId, @Sto, @Col, @Siz, @Oth1, @Oth2)";
    cmd.CommandText = query;
    cmd.Connection = con;

    cmd.Parameters.AddWithValue("@CatId", Product.CategoryId);
    cmd.Parameters.AddWithValue("@SubCatId", Product.SubCategoryId);
    cmd.Parameters.AddWithValue("@SuppId", Product.SupplierId);
    cmd.Parameters.AddWithValue("@ProdN", Product.ProductName);
    cmd.Parameters.AddWithValue("@Pur", Product.PurchasePrice);
    cmd.Parameters.AddWithValue("@Ima", Product.Image);    

    i = cmd.ExecuteNonQuery();
}

return i;

Here is my ajax:

function Add() {
    var res = validate();

    if (res === false) {
        alert("nOT VALID");
        return false;
    }

    var file_data = $('#Image').prop('files')[0];
    var form_data = new FormData();

    form_data.append('file', file_data);

    console.log("Here");

    var ProductObj = {
        CategoryId: $('#CategoryId').val(),
        SubCategoryId: $('#SubCategoryId').val(),
        Stock: $('#Stock').val(),
        Color: $('#Color').val(),
        Size: $('#Size').val(),
        Other1: $('#Other1').val(),
        Other2: $('#Other2').val(),
        Image: file_data,
    };

    console.log(ProductObj);

    $.ajax({
        url: "/Products/Add",
        data: JSON.stringify(ProductObj),
        type: "POST",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (result) {
            loadData();
            console.log(result);
            $('#myModal').modal('hide');
        },
        error: function (errormessage) {
            alert(errormessage.responseText);
        }
    });
}

I have created a .cshtml and inside that there is input field with type 'file'. Ajax calls controller and controller calls DB from which data is inserted to the database. Inside the database I have defined the image column as type 'varbinary(MAX)'.

My question is: what should I do in controller to handle the image? And what changes should be made in the model?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Utshab Khadka
  • 121
  • 1
  • 9
  • For a start you ajax code will not post back a file. You need `FormData` with the correct ajax options - refer [How to append whole set of model to formdata and obtain it in MVC](https://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) –  Aug 26 '17 at 03:58
  • Ad you should be using a view model with a property `HttpPostedFileBase` (and not with `byte[] Image`) And you can just use `.serialize()` to correctly serialize your form. –  Aug 26 '17 at 03:59
  • And your do not call `validate();` - you handle your forms `.submit()` event and test `if($('form').valid()) { ... }` –  Aug 26 '17 at 04:01

0 Answers0