How to check file type before uploading with AngularJS?

Question

I want to upload a zip file to server. Before uploading, I have to check if it's a zip file.

If it's a zip file, then submit.
If it's not a zip file, it comes up "Not a zip file." and the file can't be uploaded.

HTML:

<form action="{{restUrl}}" method="post" enctype="multipart/form-data" name="myForm" novalidate>
  <input type="file" id="fileUpload" name="fileUpload">
  <p ng-show="">Not a zip file.</p>
  <input type="submit" value="Upload">
</form>

I wish it could be a directive or a controller in AngularJS.

Answer 1

  Html 


<form action="{{restUrl}}" method="post" enctype="multipart/form-data" name="myForm" novalidate>
  <input type="file" id="fileUpload" onchange="angular.element(this).scope().uploadFile(this)" name="fileUpload">  
  <input type="submit" ng-click="submit()" value="Upload">
</form>

 <input type="submit" value="Upload">

JS side

  $scope.Iserror=false;
        $scope.uploadFile = function(files) {    
         $scope.Iserror=false;
        if(files[0].type!=="zip"){// check more condition with MIME type 
           alert("Not a zip file.");
           $scope.Iserror=true;
            return false;
            }       
        }; 

   $scope.uploadFile = function(files) {    
      if( $scope.Iserror==true){
         alert(""Not a zip file.");
         return false
       }
         // do submit code    
    }

This above code validate the file type when you choosing the file.Please take a key from my answer.

Answer 2

You can use accept attribute of input element in html. Check below html5 code

<input type="file" id="myFile" name="myFile" accept="application/zip" file-model="myApp.myFile" />

Hope this will work

Answer 3

To validate file extension you can create Angular directive & use it in html...

please see below code to create valid-file directive

{yourModuleName}.directive('validFile', function validFile($parse) {

return {
    restrict : 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ngModelCtrl) {

        ngModelCtrl.$validators.validFile = function() {

            element.on('change', function () {

                var value = element.val(),
                    model = $parse(attrs.ngModel),
                    modelSetter = model.assign;

                scope.uploadedFileType = null;

                if(!value) {

                    modelSetter(scope, '');

                } else {

                    var ext = value.substring(value.lastIndexOf('.') + 1).toLowerCase();

                    if(attrs.validFile.indexOf(ext) !== -1) {

                        scope.uploadedFileType = ext;
                        modelSetter(scope, element[0].files[0]);

                    } else {

                        scope.uploadedFileType = 'other';
                        modelSetter(scope, '');
                    }
                }
            });
        };
    }
  };
});

in html use below

<input type="file" id="payloadFile" name="payloadFile" ng-model="cntrl.payloadFile" valid-file=".xml" required/>

submit function =>

uploadFile = function() {
      var file = cntrl.payloadFile;

        if(file == undefined || file == null) {

            return;

        } else if(file == '' && $scope.uploadedFileType == 'other') {
            document.getElementById('payloadFile').setCustomValidity('Supported file formats are *.xml');
       } else{
           //submit valid file here
       }
    }

Check running code here