How to change fileupload name in angular js

Question

is there any way to change the file name dynamically in angular js

<input type="file" onchange="angular.element(this).scope().filename(this)">

and in filename method i am changing the file name but value is not changing how i can i change the file name in file upload

$scope.filename= function(e)
{

 for (var i = 0; i < e.files.length; i++) {

 var x =  e.files[i].name + "test";
 e.files[i].name =  x;
 /// here i am changing the file name but it shows its 
  read only property how can i change the name
  }
}

I want to change the upload file name...I have to assign file name for every uploaded file how?

Lakmi · Accepted Answer · 2017-10-06 07:52:08Z

1

Try this

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.filename = function(e) {
    for (var i = 0; i < e.files.length; i++) {

      var x = e.files[i].name.split('.')[0] + "test." + e.files[i].name.split('.')[1];
      console.log(x);
      e.files[i].name = x;

    }
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

  <input type="file" onchange="angular.element(this).scope().filename(this)">

</div>

answered Oct 6, 2017 at 7:52

Lakmi

1,3873 gold badges16 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vinay k Over a year ago

while your are assigning this x variable to this e.files[i].name = x; value is not assigning for "e.files[i].name" not changing to new value

Sachila Ranawaka · Accepted Answer · 2017-10-06 07:35:27Z

0

Since you are using the angularJS, You can use a directive to change the file name.

.directive('fileName', function() {
  return {
    scope: {
      fileName: '='
    },
    link: function(scope, el, attrs) {
      el.bind('change', function(event) {
        var files = event.target.files;
        var file = files[0];
        scope.file = 'Newname';
        scope.$apply();
      });
    }
  };
});

Call the directive from the element.

<input type="file" file-name="fileName">{{fileName}}

answered Oct 6, 2017 at 7:35

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Comments

Lakmi · Accepted Answer · 2017-10-06 12:44:22Z

Its readonly value, So you can use directive change file name. Try this code

var module = angular.module('myApp', []);
module.directive('file', function() {
  return {
    scope: {
      file: '='
    },
    link: function(scope, e, attrs) {
      e.bind('change', function(event) {
        var files = event.target.files;
        var file = files[0];
        scope.file = file.name.split('.')[0] + "_test." + file.name.split('.')[1];
        scope.$apply();
      });
    }
  };
});

function MainController($scope) {
  $scope.file = {};
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainController">
  <input type="file" data-file="file.file" />
  <div>Update File Name: {{file.file}}</div>


</div>

Collectives™ on Stack Overflow

How to change fileupload name in angular js

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related