upload image and save in folder using angularjs in mvc

Question

Table==>

CREATE TABLE [dbo].[Product](

[ProductID] [int] IDENTITY(1,1) NOT NULL,

[Name] [nvarchar](max) NULL,

[Type] [nvarchar](max) NULL,

[Image] [nvarchar](max) NULL,

[Remarks] [nvarchar](max) NULL,

[CreatedDate] [datetime] NULL,

[CreatedBy] [int] NULL,

[UpdatedDate] [datetime] NULL,

[UpdatedBy] [int] NULL,

CONSTRAINT [PK_Product] PRIMARY KEY CLUSTERED

(

[ProductID] ASC

)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]

) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

 

===>SP

Create PROCEDURE [dbo].[Product_Insert]

@Name nvarchar(max),

@Type nvarchar(max),

@Image nvarchar(max),

@Remarks nvarchar(max),

@Createdby int

AS

begin

INSERT INTO Product( Name, Type,Image ,Remarks,StatusID, CreatedBy, CreatedDate )

VALUES(@Name, @Type,@Image, @Remarks,@StatusID, @CreatedBy,GETDATE())

 

 

 

 ==>

class product 

public int ProductID { get; set; }

public string Type { get; set; }

public string Image { get; set; }

public string Remarks { get; set; }

 

 

===> 

 productdb

public void Product_Insert(Adminreg a)

{

SqlCommand com = new SqlCommand("Product_Insert", conn);

com.CommandType = CommandType.StoredProcedure;

com.Parameters.AddWithValue("@Name", a.Name);

com.Parameters.AddWithValue("@Type", a.Type);

com.Parameters.AddWithValue("@Image", a.Image);

com.Parameters.AddWithValue("@Remarks", a.Remarks);

com.Parameters.AddWithValue("@CreatedBy", AdminID);

conn.Open();

com.ExecuteNonQuery();

conn.Close();

}

 

 

===> index

<form class="form-horizontal" role="form">

<div class="form-group">

<div class="form-group">

<label class="col-sm-3 control-label no-padding-right"> Name </label>

<div class="col-sm-9">

<input type="text" placeholder="Name" ng-model="Proudct.Name" class="col-xs-10 col-sm-5" />

</div>

</div>

<div class="form-group">

<label class="col-sm-3 control-label no-padding-right"> Type </label>

<div class="col-sm-9">

<input type="text" placeholder="Type" ng-model="Proudct.Type" class="col-xs-10 col-sm-5" />

</div>

</div>

<div class="form-group">

<label class="col-sm-3 control-label no-padding-right"> Remarks </label>

<div class="col-sm-9">

<textarea type="text" placeholder="Remarks" ng-model="Proudct.Remarks" class="col-xs-10 col-sm-5"></textarea>

</div>

</div>

<div class="form-group">

<label class="col-sm-3 control-label no-padding-right"> Image </label>

<div class="col-sm-9">

<input type="file" ng-model="Proudct.Image" id="imageUploadForm" name="image" multiple="multiple" />

</div>

</div>

<div class="clearfix form-actions">

<div class="col-md-offset-3 col-md-9">

<input type="button" class="btn btn-success" ng-click="savedata()" value="{{btntext}}" />

</div>

</div>

<div class="hr hr-24"></div>

</div>

</form>

 

Angular js

==>

var app = angular.module("ProductNewapp", []);

debugger;

app.controller("ProductNewController", function ($scope, $http) {

$scope.btntext = "Save";

// Add record

$scope.savedata = function () {

$scope.btntext = "Please Wait..";

debugger;

$http({

method: 'POST',

url: '/Product/Add_Product',

data: $scope.Adminreg,

}).then(function (d) {

$scope.btntext = "Save";

$scope.Adminreg = null;

alert(d);

}).catch(function () {

alert('Failed');

});

};

});

$(document).ready(function () {

debugger;

$("#imageUploadForm").change(function () {

var formData = new FormData();

var totalFiles = document.getElementById("imageUploadForm").files.length;

for (var i = 0; i < totalFiles; i++) {

var file = document.getElementById("imageUploadForm").files[i];

formData.append("imageUploadForm", file);

}

$.ajax({

type: "POST",

url: '/Product/Add_Product',

data: formData,

dataType: 'json',

contentType: false,

processData: false

//success: function(response) {

// alert('succes!!');

//},

//error: function(error) {

// alert("errror");

//}

}).done(function () {

alert('success');

}.fail(function (xhr, status, errorThrown) {

alert('fail');

}));

});

});

 

===> 

Contreller 

 

public ActionResult ProductAdd()

{

return View();

}

 

public JsonResult Add_Product(Adminreg a)

{

var files = Request.Files;

for (int i = 0; i < Request.Files.Count; i++)

{

var file = Request.Files[i];

var fileName = Path.GetFileName(file.FileName);

var path = Path.Combine(Server.MapPath("~/Uploaded/Product/"), fileName);

file.SaveAs(path);

}

string result = string.Empty;

try

{

db.Product_Insert(a);

result = "Data inserted successfully.....";

}

catch (Exception ex)

{

result = "failed";

}

return Json(result, JsonRequestBehavior.AllowGet);

}