Display uploaded FileName of each dynamically added row using AngularJS in ASP.Net MVC

Last Reply 3 months ago By dharmendr

Posted 3 months ago

Hi,

How to display upload file name on each row after clicking of add in dynamically added row

In dyanmically added rows i have 3 fields Name, Country and file

currently my requirement is that after clicking of add button need to display file name on each row

Could you please help me 

@{ 
    Layout = null;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
</head>
<body>
    <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;
                $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);
                }
            }
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <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><input type="file" ngf-select="UploadFiles($files)" ng-model="m.file" /></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>
</body>
</html>

 

Posted 3 months ago Modified on 3 months ago

Hi mahesh213,

You can't set fileupload value. FileUpload control does not allow you to set values nor it will retain values.

So to display the file name you can disply it using databinding property.

Check this example. Now please take its reference and correct your code.

View

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Index</title>
</head>
<body>
    <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);
                }
            }
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <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>
</body>
</html>

Demo