Upload and Save multiple files for each user in row using AngularJS in ASP.Net MVC

mahesh21...

SOLVED CLOSED ACTIVE ANSWERED
User: mahesh213
Posted: on Feb 21, 2020 01:20 AM
Forum: ASP.Net MVC
Answer: 1
Views: 7125
Sample Code: Download

Hi,

I have 2 tables in database

currently my requirement is that based upon EmployeeId i am going to save multiple fiels into documents table

this is my excepted code

Employee

Id Name

1 aaa

2 bbbb

Documents

DId DocName Id

1 c:/Upload/uploadfiels/mahesh.text 1

2 c:/Upload/uploadfiels/mahesh.text 1

3 c:/Upload/uploadfiels/mahesh.2text 1

4 c:/Upload/uploadfiels/resume.text 2

5 c:/Upload/uploadfiels/word.text 2

6 c:/Upload/uploadfiels/file.2text 2

This is my below code

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <meta charset="utf-8" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('MainCtrl', function ($scope) {
            $scope.employees = [{ Name: 'aa' }, {Name:'bb' }];
            $scope.files = []; 
        });
        $scope.Save = function () {
        }

        app.directive('ngFileModel', ['$parse', function ($parse) {
            return {
                restrict: 'A',
                link: function (scope, element, attrs) {
                    var model = $parse(attrs.ngFileModel);
                    var isMultiple = attrs.multiple;
                    var modelSetter = model.assign;
                    element.bind('change', function () {
                        var values = [];
                        angular.forEach(element[0].files, function (item) {
                            var value = {
                                // File Name 
                                name: item.name,
                                //File Size 
                                size: item.size,
                                //File URL to view 
                                url: URL.createObjectURL(item),
                                // File Input Value 
                                _file: item
                            };
                            values.push(value);
                        });
                        scope.$apply(function () {
                            if (isMultiple) {
                                modelSetter(scope, values);
                            } else {
                                modelSetter(scope, values[0]);
                            }
                        });
                    });
                }
            };
        }]);
    </script>
    <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>UploadFile</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="employee in employees">
                <td><input type="text" ng-model="employee.Name" /></td>
                <td><input type="file" ng-file-model="files" multiple /></td>
            </tr>
        </tbody>
    </table>
    <button ng-click="Save()">Save</button>
</body>
</html>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Feb 21, 2020 06:20 AM
Modified: on Feb 24, 2020 07:39 AM
Report

Hi mahesh213,

Check the below code.

Namespaces

using System.IO;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;

Controller

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult InsertFileDetails()
    {
        string path = Server.MapPath("~/Uploads/");
        if (!Directory.Exists(path))
        {
            Directory.CreateDirectory(path);
        }

        //Save the Files.
        for (int i = 0; i < Request.Files.Count; i++)
        {
            HttpPostedFileBase postedFile = Request.Files[i];
            string fileName = Path.GetFileName(postedFile.FileName);
            postedFile.SaveAs(path + Path.GetFileName(postedFile.FileName));
        }

        // Save to database.
        List<FileModel> model = JsonConvert.DeserializeObject<List<FileModel>>(Request.Form["details"]);
        for (int i = 0; i < model.Count; i++)
        {
            // Loop through the array and save in database.
            int id = model[i].Id;
            for (int j = 0; j < model[i].Names.Length; j++)
            {
                string fileName = "~/Uploads/" + model[i].Names[j];
            }
        }
        return View();
    }

    public class FileModel
    {
        public int Id;
        public string[] Names;
    }
}

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <script type="text/javascript" src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller('MainCtrl', function ($scope, $http) {
            $scope.employees = [{ Id: 1, Name: 'aa' }, { Id: 2, Name: 'bb'}];
            $scope.files = [];
            $scope.Save = function () {
                var formData = new FormData();
                var details = new Array();
                for (var i = 0; i < $scope.employees.length; i++) {
                    var detail = {};
                    detail.Id = $scope.employees[i].Id;
                    var files = new Array();
                    if ($scope.employees[i].files != undefined) {
                        for (var j = 0; j < $scope.employees[i].files.length; j++) {
                            files.push($scope.employees[i].files[j].name);
                            var file = $scope.employees[i].files[j];
                            formData.append(file, file._file);
                        }
                        detail.Names = files;
                    }
                    details.push(detail);
                }
                formData.append("details", JSON.stringify(details));

                $http.post("/Home/InsertFileDetails", formData, {
                    transformRequest: angular.identity,
                    headers: { 'Content-Type': undefined }
                }).success(function () {
                });
            }
        });
        app.directive('ngFileModel', ['$parse', function ($parse) {
            return {
                restrict: 'A',
                link: function (scope, element, attrs) {
                    var model = $parse(attrs.ngFileModel);
                    var isMultiple = attrs.multiple;
                    var modelSetter = model.assign;
                    element.bind('change', function () {
                        var values = [];
                        angular.forEach(element[0].files, function (item) {
                            var value = {
                                // File Name
                                name: item.name,
                                //File Size
                                size: item.size,
                                //File URL to view
                                url: URL.createObjectURL(item),
                                // File Input Value
                                _file: item
                            };
                            values.push(value);
                        });
                        scope.$apply(function () {
                            var index = scope.$index;
                            if (isMultiple) {
                                modelSetter(scope, values);
                                scope.$parent.employees[index].files = values;
                            } else {
                                modelSetter(scope, values[0]);
                                scope.$parent.employees[index].files = values[0];
                            }
                        });
                    });
                }
            };
        } ]);
    </script>
</head>
<body ng-app="myApp" ng-controller="MainCtrl">
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>UploadFile</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="employee in employees">
                <td><input type="text" ng-model="employee.Name" /></td>
                <td><input type="file" ng-file-model="files" multiple /></td>
            </tr>
        </tbody>
    </table>
    <button ng-click="Save()">Save</button>
</body>
</html>

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Upload and Save multiple files for each user in row using AngularJS in ASP.Net MVC

Company

Explore

Follow us

Contact Us