Home / Questions / 137977
Accepted
Bernardo Harreguy
Asked: 2020-02-13 10:39:36 +0800 CST 2020-02-13 10:39:36 +0800 CST

Select all files in a folder that are of a given type

  • 772

I'm looking for a way to recursively search over a folder (exploring directory and subdirectories) for files to be uploaded with AngularJS Upload, but the important thing is to en-list the files and search in a local folder. That is, a function that returns in an array, for example, the mp3 files found in a specified folder, I am not so interested in the upload part.

The idea is to do it in AngularJS if possible or by JavaScript or jQuery maybe. Does anyone know something? It would also be nice if it finds files with the same name, just take one, not both.

javascript

1 Answers

  1. Best Answer

    To be able to search an entire directory and subdirectories of a particular one, it can be done as follows:

    var app = angular.module('myApp', []);
app.controller('SubirArchivos', function($scope, $http, $parse) {
  $scope.name = 'World';
  $scope.files = [];

  //a partir de aqui el codigo no funciona como deberia
  $scope.upload = function(element) {
    //aqui comienza el codigo de funcion para subir archivos
    console.log("intentando subir");
    angular.forEach(element[0].files, function(item) {
      console.log("intentando subir");
      var fd = new FormData();
      fd.append('file', item);
      $http.post(item.url, fd, {
        transformRequest: angular.identity,
        headers: {
          'Content-Type': undefined
        }
      }).then(function(success) {
        console.log("subido " + success.data.data);
        return success.data.data;
      });
    });
    // aqui finaliza la funcion encargada de subir archivos         
  };

});

app.directive('ngFileModel', ['$parse', function($parse) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var model = $parse(attrs.ngFileModel);
      var isMultiple = attrs.multiple;
      var modelSetter = model.assign;
      element.bind('change', function() {
        var values = [];
        /*if (files != null)
         element.push(files);*/
        angular.forEach(element[0].files, function(item) {
          if (item.name.endsWith("mp3")) {
            var value = {
              name: item.name,
              size: item.size,
              url: URL.createObjectURL(item),
              _file: item
            };
            values.push(value);
          }
        });

        scope.$apply(function() {
          if (isMultiple) {
            modelSetter(scope, values);

          } else {
            modelSetter(scope, values[0]);
          }
        });
      });
    }
  };
}]);
    <!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>prueba</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
</head>

<body>

  <div ng-controller="SubirArchivos">
    <input type="file" webkitdirectory directory ng-file-model="files" multiple />
    <button type="button" ng-click="upload();">Subir archivos</button>

    <p ng-repeat="file in files">
      {{file.name}}
    </p>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>

</html>

    In this way you can select a directory and it will select all the files and only get the ones that are finished in mp3

    • 0