Input type[file] doesnot display the name of the file. Angularjs

Question

I am new to angularjs. The project is getting transitioned from jquery to angular. Initially, it was a nightmare with all the new terms and scarry topics. I am getting used to it now and actually enjoying working on angular.

I am stuck at one part and i hope someone could help me or suggest me here. Please refer to the jsfiddle. http://jsfiddle.net/ash12/kk1s3a1d/12/

Here is th HTML code....

<div ng-controller="ListController"><br>
    &emsp;File:                 
    &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
    &emsp;&emsp;Name:&emsp;&emsp;&emsp;
    &emsp;&emsp;City:<br/>

    <input type='file' ng-model="activeItem.name">
    <select name="singleSelect" ng-model="activeItem.content">
          <option  value="" disabled="" selected="" style="display:none;">Select Name</option>
          <option>Rob</option>
          <option>Dilan</option>
    </select>
     <select name="singleSelect1" ng-model="activeItem.content1">
          <option value="" disabled="" selected="" style="display:none;">Select City</option>
          <option>China</option>
          <option>Korea</option>
          <option>United States</option> 
    </select>   
    <button ng-click="addItem()">+</button><br>

    <ul>
        <li ng-repeat="item in items">&emsp;&emsp;<a>{{item.name}}</a><a>{{item.content}}</a>
            &emsp;&emsp;&emsp;&emsp;&emsp;<a>{{item.content1}}</a>
        </li>
    </ul>
</div>

Here is the controller function...

function ListController($scope) {
$scope.items = [{
    }];

$scope.activeItem = {
    name: '',
    content: '',
    content1:''
}

$scope.addItem = function () {
    $scope.items.push($scope.activeItem);
    $scope.activeItem = {} /* reset active item*/
}

}

Here, if i select the file name, name and city and then press on add button. It shows the list below. The problem is that it doesnot show the file which we have selected.

Can someone please tell me what to do in this case ? Also, i need the click button to be active only for 6 times. after adding the 6th time, it should not let me add any further. can someone suggest here ??

curiousgeek · Accepted Answer · 2015-10-23 21:21:32Z

1

You need to do that by handling the onchange event of the file input

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

and In your controller

 $scope.fileNameChanged = function(el){
        $scope.activeItem.name = el.files[0].name
    }

To disable your add button, in your additem check for the length of your items array and disable the button using ng-disabled

See the updated fiddle here : http://jsfiddle.net/kk1s3a1d/15/

edited Oct 23, 2015 at 21:21

answered Oct 23, 2015 at 21:15

curiousgeek

8466 silver badges11 bronze badges

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

4 Comments

Ayesha Over a year ago

@curiousgeek- this is cool. i was thinking whether i had to do two ng-clicks calls on the add button. one for adding the details and one for keeping a track of number of times user pressed. you did it pretty well. thanks

Ayesha Over a year ago

@curiousgeek- I have one minor doubt. the click button should be able to click only when user has selected all the three options. in current case, irrespective of fields selected, the click works. do you have any suggestion to avoid that part ?

curiousgeek Over a year ago

One way i could think of is placing all your controls in a form with required validations and enable your click button only if it's valid.

curiousgeek Over a year ago

Something like ng-disabled = formFileUpload.$invalid || disableAdd , where formFileUpload is name of your form

Hrishi · Accepted Answer · 2015-10-23 21:18:43Z

1

here is the working jsfiddle of your problem

http://jsfiddle.net/adiioo7/fA968/

you need to use onchange as mentioned below as ng-model and ng-change doesnt work with input type="file"

 <input type="file" ng-model="image" onchange="angular.element(this).scope().uploadImage(event)" />

answered Oct 23, 2015 at 21:18

Hrishi

7614 silver badges12 bronze badges

Collectives™ on Stack Overflow

Input type[file] doesnot display the name of the file. Angularjs

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related