web-dev-qa-db-fra.com

Validation de l'extension de fichier dans AngularJs avant le téléchargement

Je télécharge des images de notre application sur le serveur. Existe-t-il un moyen de valider les extensions côté client par JS avant de les soumettre au serveur avant de les télécharger sur le serveur?

J'utilise AngularJs pour gérer mon front-end.

javascriptangularjsfrontendimage-uploading
13
Ali Saberi

Vous pouvez utiliser ce javascript simple pour valider. Ce code doit être placé dans une directive et lors du changement de contrôle du téléchargement de fichier.

var extn = filename.split(".").pop();

Sinon, vous pouvez également utiliser la méthode de sous-chaîne javascript:

fileName.substr(fileName.lastIndexOf('.')+1)
23
Sanjeev Singh

Vous pouvez créer une directive angulaire, quelque chose comme ceci devrait fonctionner (Modifiez les valeurs acceptées dans le tableau validFormats);

HTML:

    <form name='fileForm' >
        <input type="file" name="file" ng-model="fileForm.file" validfile>
    </form>

Javascript:

angular.module('appname').directive('validfile', function validFile() {

    var validFormats = ['jpg', 'gif'];
    return {
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            ctrl.$validators.validFile = function() {
                elem.on('change', function () {
                   var value = elem.val(),
                       ext = value.substring(value.lastIndexOf('.') + 1).toLowerCase();   

                   return validFormats.indexOf(ext) !== -1;
                });
           };
        }
    };
});
11
ecarrizo

pour la validation de fichier i.e required, extension de fichier, size .Create directive personnalisée et module angulaire js-message utilisé pour simplifier les erreurs de validation

HTML

<input type="file" ng-model="imageFile" name="imageFile" valid-file required>

<div ng-messages="{FORMNAME}.imageFile.$error" ng-if="{FORMNAME}.imageFile.$touched">
     <p ng-message="required">This field is required</p>
     <p ng-message="extension">Invalid Image</p>
 </div>

Angulaire JS

customApp.directive('validFile', function () {
return {
    require: 'ngModel',
    link: function (scope, elem, attrs, ngModel) {
        var validFormats = ['jpg','jpeg','png'];
        elem.bind('change', function () {
            validImage(false);
            scope.$apply(function () {
                ngModel.$render();
            });
        });
        ngModel.$render = function () {
            ngModel.$setViewValue(elem.val());
        };
        function validImage(bool) {
            ngModel.$setValidity('extension', bool);
        }
        ngModel.$parsers.Push(function(value) {
            var ext = value.substr(value.lastIndexOf('.')+1);
            if(ext=='') return;
            if(validFormats.indexOf(ext) == -1){
                return value;
            }
            validImage(true);
            return value;
        });
    }
  };
});

Requiertangular-messages.min.js

5
Aniket Muruskar

Voici le code complet pour valider l'extension de fichier en utilisant AngularJs

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <script type='text/javascript'>
            var myApp = angular.module('myApp', []);
            myApp.controller('MyCtrl', function($scope) {
                $scope.setFile = function(element) {
                    $scope.$apply(function($scope) {
                        $scope.theFile = element.files[0];
                        $scope.FileMessage = '';
                        var filename = $scope.theFile.name;
                        console.log(filename.length)
                        var index = filename.lastIndexOf(".");
                        var strsubstring = filename.substring(index, filename.length);
                        if (strsubstring == '.pdf' || strsubstring == '.doc' || strsubstring == '.xls' || strsubstring == '.png' || strsubstring == '.jpeg' || strsubstring == '.png' || strsubstring == '.gif')
                        {
                          console.log('File Uploaded sucessfully');
                        }
                        else {
                            $scope.theFile = '';
                              $scope.FileMessage = 'please upload correct File Name, File extension should be .pdf, .doc or .xls';
                        }

                    });
                };
            });
    </script>

</head>
<body ng-app="myApp">
    <div ng-controller="MyCtrl">
        <input type="file"
               onchange="angular.element(this).scope().setFile(this)">
        {{theFile.name}}
        {{FileMessage}}
    </div>

</body>
</html>
1
Shakeer Hussain

Vous pouvez ajouter une directive personnalisée qui recherche le tableau element.files afin de vérifier le type dans l'événement onchange . Il n'y a pas de validation intégrée pour l'entrée de fichier. 

0
Matias Fernandez Martinez

Téléchargement de fichier avec AngularJS

De nombreux modules peuvent vous aider. Chacun de ceux-ci devrait vous permettre de définir un filtre pour télécharger uniquement certaines extensions de fichier.

Si vous cherchez une solution plus simple, vous pouvez utiliser quelque chose comme string.js pour vous assurer que les noms de fichier des fichiers téléchargés ont une extension «.png».

0
jcc