0

I'm using ng-message to show the error messages for the form it works fine for the input type='text' and other but how to use ng-message on input type='file' to show different messages based on the extension of the uploaded file. Or is their any library that can provide error message?

Please guide me into this.

Aks
  • 8,181
  • 5
  • 37
  • 38
Sparsh Pipley
  • 451
  • 8
  • 22

3 Answers3

0

Instead of ng-message error messages can be displayed this way

<div class="modal-body">
    <input id=choseefile type="file" ng-file="file" >
    <button ng-click="upload()">Upload</button>
    <div role="alert" ng-show="message.length>0">
        <li ng-repeat="msg in message">{{msg}}</li>
    </div>
</div>

and upload function as this:

$scope.upload = function() {
    $scope.message = "";
    $http({
    .........................
        }),
    }).success(function(data, status, headers, config) {
        ...................

    }).error(function(data, status, headers, config) {
        $scope.message = [];
        $scope.message.push("Error Message");
    });

};

Hope this helps

Charan Teja
  • 33
  • 1
  • 6
0

If you want to check the file type on frontend then you can use this:

HTML for this:

<form name="radioForm" ng-controller="Ctrl">
    <input type="file" name="uploadFile" id="uploadFile">
    <input type="submit"  ng-click="submitForm()">
</form>

In controller:

 $scope.submitForm=function() {
  if (document.radioForm.elements["uploadFile"].value == "") {
     alert("You forgot to attach file!");

  }
  var res_field = document.radioForm.elements["uploadFile"].value;
  var extension = res_field.substr(res_field.lastIndexOf('.') + 1).toLowerCase();
  var allowedExtensions = ['doc', 'docx', 'txt', 'pdf', 'rtf'];
  if (res_field.length > 0)
  {
     if (allowedExtensions.indexOf(extension) === -1)
     {
        alert('Invalid file Format. Only ' + allowedExtensions.join(', ') + ' are allowed.');
        return false;
     }
  }
}
Daniele Sassoli
  • 899
  • 12
  • 34
DirtyMind
  • 2,353
  • 2
  • 22
  • 43
  • it's better to access the element via a directive's element, not via the document directly. You could read http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background that can help you overcome this "jquery thinking" – Utopik Oct 07 '15 at 14:06
-1
For the extension validation:
You can write this code in your validation method in backend:
 validatFile(your parameters)
 String fileName = file.originalFilename
            def matcher = (fileName =~ /.*\.(.*)$/)
            if (matcher.matches()) {
                def extension = matcher[0][1]
                if (!(extension in ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'txt'])) {
                    log.info("Invalid file format-------")
                    errMsg = "Invalid file format. Please add .doc .docx .xls .xlsx .pdf and text files only"

                }
            }
DirtyMind
  • 2,353
  • 2
  • 22
  • 43