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.

Ramesh Rajendran · Accepted Answer · 2015-04-21 09:18:11Z

3

  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.

edited Apr 21, 2015 at 9:18

answered Apr 21, 2015 at 8:45

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

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

2 Comments

doreentseng Over a year ago

So .. how to write <input type="file" id="" name="">?

doreentseng Over a year ago

Please have a look for me, thanks. plnkr

Varun · Accepted Answer · 2015-10-21 06:12:33Z

0

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

answered Oct 21, 2015 at 6:12

Varun

992 silver badges10 bronze badges

1 Comment

Brien Malone Over a year ago

This approach has a potential flaw. The client's browser announces the mime type of a file. I have an accept set to excel mime types. When a user who doesn't have Excel installed tries to upload an XLS, the browser interprets the extension as an application/octet stream because there is no definition for that extension. The web server is set to reject files with that mime type, so the upload fails.

Ali · Accepted Answer · 2017-03-30 13:26:00Z

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

Collectives™ on Stack Overflow

How to check file type before uploading with AngularJS?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related