Save multiple records with uploaded file path for single user using AngularJS in ASP.Net MVC

Last Reply 20 days ago By dharmendr

Posted 23 days ago

Hi,

I have 2 tables IN database

Employee

EId   EName

1      mahesh

Items

Id EId Name Country FileName

1  1   aaaa   India     F:\upload\App_Data\Functionalities.xlsx

2    2   bbbb  India   F:\upload\App_Data\Functionalities1.xlsx

Currently my requirement is that based upon EId i am going to save N no of item values to Items table

Please be check my code and help me

where should i done miskate 

@{ 
    Layout = null;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
</head>
<body>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.2.13/ng-file-upload.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['ngFileUpload'])
        app.controller('MyController', function ($scope, $window) {
            $scope.Customers = [];
            $scope.UploadFiles = function (files) {
                $scope.SelectedFiles = files;
            };
            $scope.Add = function () {
                //Add the new item to the Array.
                var customer = {};
                customer.Name = $scope.Name;
                customer.Country = $scope.Country;
                customer.FileName = $scope.SelectedFiles[0].name;
                $scope.Customers.push(customer);

                //Clear the TextBoxes.
                $scope.Name = "";
                $scope.Country = "";
            };

            $scope.Remove = function (index) {
                //Find the record using Index from Array.
                var name = $scope.Customers[index].Name;
                if ($window.confirm("Do you want to delete: " + name)) {
                    //Remove the item from Array using Index.
                    $scope.Customers.splice(index, 1);
                }
            }

            $scope.Save = function () {
                debugger;
                var orders = {};
                orders.EName = $scope.EName;
                var details = new Array();
                for (var i = 0; i < $scope.Customers.length; i++) {
                    var detail = {};
                    detail.Name = $scope.Customers[i].Name;
                    detail.Country = $scope.Customers[i].Country;
                    details.push(detail);
                }
                orders.details = details;
                var formData = new FormData();
                var files = $scope.SelectedFiles;
                if (files != undefined) {
                    for (var i = 0; i < files.length; i++) {
                        formData.append(files[i].name, files[i]);
                    }
                }
                formData.append("orders", JSON.stringify(orders));
                $.ajax({
                    url: '/upload/SaveOrder',
                    type: "POST",
                    contentType: false,
                    processData: false,
                    data: formData,
                    success: function (result) {
                        alert(result);
                        $scope.Customers = [];
                        $scope.refresh();
                    },
                    error: function (err) {
                        $scope.Message = err.Message;
                    }
                });
            };

        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <table class="table table-condensed">
                        <tr class="active">
                            <td>Employee Name</td>
                            <td><input type="text"  class="form-control" ng-model="EName" /></td>
                    </table>
                </div>
            </div>
        </div>

        <table cellpadding="0" cellspacing="0">
            <tr>
                <th>Name</th>
                <th>Country</th>
                <th></th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td>{{m.Name}}</td>
                    <td>{{m.Country}}</td>
                    <td>{{m.FileName}}</td>
                    <td><input type="button" ng-click="Remove($index)" value="Remove" /></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td><input type="text" ng-model="Name" /></td>
                    <td><input type="text" ng-model="Country" /></td>
                    <td><input type="file" ngf-select="UploadFiles($files)" ng-model="file" /></td>
                    <td><input type="button" ng-click="Add()" value="Add" /></td>
                </tr>
            </tfoot>
        </table>
        <div style="padding: 10px 0;">
            <input id="submit" type="button" value="Save" name="add" ng-click="Save()" class="btn btn-success" />
        </div>
    </div>
</body>
</html>

 

        [HttpPost]
        public ActionResult SaveOrder()
        {
            string fileName;
            string result = "Error! Order Is Not Complete!";
            {              
                    try
                    {
                        // Get uploaded files from Request object.
                        if (Request.Files.Count > 0)
                        {
                            for (int i = 0; i < Request.Files.Count; i++)
                            {
                                HttpPostedFileBase postedFile = Request.Files[i];
                                if (Request.Browser.Browser.ToUpper() == "IE" || Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")
                                {
                                    string[] file = postedFile.FileName.Split(new char[] { '\\' });
                                    fileName = file[file.Length - 1];
                                }
                                else
                                {
                                    fileName = postedFile.FileName;
                                }
                                fileName = Path.Combine(Server.MapPath("~/App_Data/"), fileName);
                                postedFile.SaveAs(fileName);

                                // Get Order details from Request object.
                                Employee orders = JsonConvert.DeserializeObject<Employee>(Request.Form["orders"]);
                                // Do other task.
                                Employee order = new Employee();
                                order.EName = orders.EName;
                                db.Employees.Add(order);
                                db.SaveChanges();
                                int orderId = order.EId;
                                foreach (var detail1 in orders.details)
                                {
                                    Items item1 = new Item();
                                    item1.EId = orderId;
                                    item1.Name = detail1.Name;
                                    item1.Country = detail1.Country;
                                    item1.FileName = fileName;
                                    db.Attachments.Add(item1);
                                    db.SaveChanges();
                                }
                                foreach (var detail in orders.details)
                                {
                                    Item item = new Item();
                                    item.Name = detail.Name;
                                    item.OrderId = orderId;
                                    db.Items.Add(item);
                                    db.SaveChanges();
                                }

                            }
                        }
                        result = "Success! Order Is Complete!";
                    }
                    catch (Exception ex)
                    {
                        return Json(ex.Message, JsonRequestBehavior.AllowGet);

                    }              
            }

            return Json(result, JsonRequestBehavior.AllowGet);
        }  

 

Posted 22 days ago

Hi mahesh213,

You need to save the selected files in an Array. What you are currently using is save only one file.

Check the updated script.

<script type="text/javascript">
    var app = angular.module('MyApp', ['ngFileUpload'])
    app.controller('MyController', function ($scope, $window) {
        $scope.Customers = [];
        $scope.SelectedFiles = [];
        $scope.UploadFiles = function (files) {
            if (files.length > 0) {
                $scope.SelectedFile = files;
                $scope.SelectedFiles.push(files);
            }
        };
        $scope.Add = function () {
            var customer = {};
            customer.Name = $scope.Name;
            customer.Country = $scope.Country;
            customer.FileName = $scope.SelectedFile[0].name;
            $scope.Customers.push(customer);

            $scope.Name = "";
            $scope.Country = "";
        };

        $scope.Remove = function (index) {
            var name = $scope.Customers[index].Name;
            if ($window.confirm("Do you want to delete: " + name)) {
                $scope.Customers.splice(index, 1);
            }
        }

        $scope.Save = function () {
            var orders = {};
            orders.EName = $scope.EName;
            var details = new Array();
            for (var i = 0; i < $scope.Customers.length; i++) {
                var detail = {};
                detail.Name = $scope.Customers[i].Name;
                detail.Country = $scope.Customers[i].Country;
                details.push(detail);
            }
            orders.details = details;
            var formData = new FormData();
            var files = $scope.SelectedFiles;
            if (files != undefined) {
                for (var i = 0; i < files.length; i++) {
                    formData.append(files[i][0].name, files[i][0]);
                }
            }
            formData.append("orders", JSON.stringify(orders));
            $.ajax({
                url: '/Home/SaveOrder',
                type: "POST",
                contentType: false,
                processData: false,
                data: formData,
                success: function (result) {
                    alert(result);
                    $scope.Customers = [];
                    $scope.refresh();
                },
                error: function (err) {
                    $scope.Message = err.Message;
                }
            });
        };
    });
</script>

 


Posted 20 days ago

Based on you file count the loop will be executed.

Since you are adding the to Employee object inside the loop the Employee record is inserted multiple times and the EId is set to orderId variable and it is passed to the MultipleUpload object which inserts the new EId to MultipleUploads table.

So to overcome the issue declare it outside the loop and insert Employee only once.

Check the updated code.

[HttpPost]
public ActionResult SaveOrder()
{
    string fileName;
    string result = "Error! Order Is Not Complete!";
    {
        try
        {
            // Get Order details from Request object.
            Employee orders = JsonConvert.DeserializeObject<Employee>(Request.Form["orders"]);
            // Do other task.
            Employee order = new Employee();
            order.EName = orders.EName;
            // Insert to Employee Table.
            db.Employees.Add(order);
            db.SaveChanges();
            int orderId = order.EId;

            // Get uploaded files from Request object.
            if (Request.Files.Count > 0)
            {
                for (int i = 0; i < Request.Files.Count; i++)
                {
                    HttpPostedFileBase postedFile = Request.Files[i];
                    if (Request.Browser.Browser.ToUpper() == "IE" || Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")
                    {
                        string[] file = postedFile.FileName.Split(new char[] { '\\' });
                        fileName = file[file.Length - 1];
                    }
                    else
                    {
                        fileName = postedFile.FileName;
                    }
                    fileName = Path.Combine(Server.MapPath("~/App_Data/"), fileName);
                    postedFile.SaveAs(fileName);

                    MultipleUpload item1 = orders.details[i];
                    item1.EId = orderId;
                    item1.FileName = fileName;
                    // Insert to MultipleUpload Table.
                    db.MultipleUploads.Add(item1);
                    db.SaveChanges();
                }
            }
            result = "Success! Order Is Complete!";
        }
        catch (Exception ex)
        {
            return Json(ex.Message, JsonRequestBehavior.AllowGet);

        }
    }

    return Json(result, JsonRequestBehavior.AllowGet);
}