Hussain Hussain - 1 year ago 70
AngularJS Question

File name doesn't get cleared after form.$setPristine for a custom angular directive for file upload

I am using

angular 1.5.8
. After following some resources, I got the file upload working. I had to create a custom directive for that.


'use strict';

export default function (app) {

app.directive('fileUploadModel', fileUploadModelDirective);

function fileUploadModelDirective () {

return {
restrict: 'A',
link: linkFn,
require: 'ngModel'

function linkFn (scope, element, attrs, ngModel) {
element.bind('change', function(event){
var files =;
var file = files[0];



I am also using angular's
. And I have a "reset" button on this form. I want to clear all the form fields when clicked. And it happens with all form fields except


<form ng-submit="dataCtrl.upload(form)" name="form">
<div class="form-group" ng-class="{'has-error' : form.file.$invalid && !form.file.$pristine}">
<label>Select file</label>
<input type="file" name="file" ng-model="dataCtrl.newUpload.csvFile" file-upload-model required/>

<div class="form-group" ng-class="{'has-error' : form.comment.$invalid && !form.comment.$pristine}">
<textarea class="form-control" name="comment"
ng-model="dataCtrl.newUpload.comment" required></textarea>

<div class="form-group pull-right">
<button type="submit" class="btn btn-success" ng-disabled="form.$invalid">Upload</button>
<button class="btn btn-default" ng-click="dataCtrl.reset(form)" ng-disabled="!form.$dirty">Reset</button>

And the Controller

'use strict';

function DataController($log, catalogCnst, requestSV, $http) {

this.reset = function(form) {
this.newUpload = {};
// form.file.$setViewValue(null); // this didn't work either

this.upload = function(form) {
// some code

When "reset" is clicked, I see that

form.file.$pristine is false
form.file.$invalid is false

But I still see filename near the file upload element.

I also tried adding watch and handling event on the element in the directive

scope.$watch(attrs.fileUploadModel, function(value) {

element.on('$pristine', function() {

But they didn't get invoked.

How do I do this? Please guide me.

Answer Source

When you clear newUpload, file input does not get cleared. You need to do this separately.

See JSFiddle:

Basically, I added to the directive scope:

scope: {
  model: '=ngModel'

... and watch:

scope.$watch('model', function(file) {
  if (!file) {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download