Comment effacer un fichier d'entrée de Angular JS

Dans AngularJS, je suis en utilisant l'approche décrite ici pour gérer input type=file.

Balisage:

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

Contrôleur:

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {
    $scope.setFile = function(element) {
        $scope.$apply(function($scope) {
            $scope.theFile = element.files[0];
        });
    };
});

Comme mentionné, c'est un peu un hack, mais il a surtout pour mes fins. Ce dont j'ai besoin en est, cependant, un moyen d'effacer le fichier en entrée une fois le téléchargement terminé - c'est à dire: à partir du contrôleur.

Je pourrait tout à fait pirater et utiliser jQuery ou quelque chose à trouver l'élément d'entrée et clair, mais il a été en espérant quelque chose d'un peu plus élégant.

InformationsquelleAutor Brad Robinson | 2013-02-26

angularjs

11

Je n'hésiterais pas à utiliser la directive pour ce genre de tâche.

http://plnkr.co/edit/xLM9VX
```
app.directive('fileSelect', function() {
  var template = '<input type="file" name="files"/>';
  return function( scope, elem, attrs ) {
    var selector = $( template );
    elem.append(selector);
    selector.bind('change', function( event ) {
      scope.$apply(function() {
        scope[ attrs.fileSelect ] = event.originalEvent.target.files;
      });
    });
    scope.$watch(attrs.fileSelect, function(file) {
      selector.val(file);
    });
  };
});
```
remarque: il est à l'aide de jquery pour l'élément de la création.
- Nice. Le seul problème que j'ai remarqué, c'est que, après la sélection d'un fichier, il y a une erreur dans le journal de la console sur une défaillance de l'élément HTML dans le champ d'application.$fonction de veille. (Fonctionnement en Chrome)
- Solution de contournement est de "changer de sélecteur.val(fichier);" à "if (fichier==null) sélecteur.val(fichier);"
- Ce genre de réponse est assez frustrant, sans aucune explication.
InformationsquelleAutor Tosh
35

Après un téléchargement réussi, j'ai clairement le type d'entrée les éléments du fichier explicitement à partir de mon contrôleur, comme suit:
```
  angular.forEach(
    angular.element("input[type='file']"),
    function(inputElem) {
      angular.element(inputElem).val(null);
    });
```
La input[type='file'] sélecteur nécessite jQuery, mais tout le reste est de la plaine Angulaire.
- Vous ne devriez vraiment pas faire de manipulation du DOM dans le contrôleur. C'est ce que les directives sont pour.
- Cela ne fonctionne pas pour moi. Si j'essaie de le sélectionner à nouveau le même fichier, le onchange n'est pas déclenché. Des idées?
- Cela fonctionne très bien pour moi. Pour certaines raisons, je ne pouvais pas la accepté la directive de travail (peut-être de ma faute car j'ai plus de choses dans la balise input).
- Si vous ne souhaitez pas utiliser jQuery, vous pouvez utiliser document.getElementById('inputId').value = null;
InformationsquelleAutor ovidiu

ma solution sans l'aide de $scope.

app.directive('fileChange',['UploadService',function (UploadService) {
    var linker = function (element, attrs) {
        element.bind('change', function (event) {
            var files = event.target.files;
            UploadService.upload({'name':attrs['name'],'file':files[0]});
            element.val(null);  //clear input
        });
    };
    return {
        restrict: 'A',
        link: linker
    };
}]);

ce doit être la meilleure réponse. court et élégant. Me demande pourquoi utiliser un sélecteur dans la directive lorsque nous avons de l'éditeur de liens.
comment il peut être réécrite pour un composant au lieu de la directive?

InformationsquelleAutor yossi

Il pourrait vous aider!!

Code HTML échantillon

 <input type="file" id="fileMobile" file-model="myFile">
 <button type="button" class="btn btn-danger" id="i-agree" ng-click="uploadFile()"> Upload </button>

AngularJs exemple de code

$scope.uploadFile = function () {
    var file = $scope.myFile;
    mobileService.uploadBulkFile(file).then(function (resp) {
        if (resp !== undefined) {
            $('#fileMobile').val('');
        }
    });
};

Sa a fonctionné pour moi

InformationsquelleAutor Anil Singh

2

Vous pouvez utiliser l'ID de réinitialiser le champ fichier.
```
<div class="col-md-8">  
    <label for="files">Select File</label>
    <input type="file" id="file_upload" class="form-control">
</div>
```
Après le téléchargement de l'effacer.
```
var fileElement = angular.element('#file_upload');
angular.element(fileElement).val(null);
```
Exemple ci-dessus fonctionne bien pour moi. Va travailler pour vous aussi.
- Simple, direct, succinct. Et les œuvres.
InformationsquelleAutor Jignesh Mesvaniya

Dans mon cas, j'ai de diffuser des événements lors du chargement d'un fichier réussit.
Donc, mon directive de montres pour la diffusion, et effacer la sélection.

app.directive("fileInput", function( APP_EVENTS ){
    return{
        require: "ngModel",
        link: function postLink( scope, elem, attrs, ngModel ){

            elem.on("change", function( e ){
                var files=elem[0].files;
                ngModel.$setViewValue( files );
            });

            scope.$on( APP_EVENTS.FILE_UPLOAD_SUCCESS, function( event ){
                elem.val( null );
            });
        }
    }
});

Il est utilisé comme suit:

<input type="file" name="myFieldName" ng-model="myModel" file-input/>

InformationsquelleAutor Stephan

Vous devez vous connecter pour publier un commentaire.