11521 sujets

JavaScript, DOM et API Web HTML5

Récupération EXIF lors d'un Upload multiple Angular

Bonjour tout le monde !

J'ai un problème que je n'arrive pas à résoudre depuis quelques jours :

Je construit une plateforme pour une entreprise, une banque d'image/galerie photo, avec Angular.
Sur la page qui permet l'upload des images, j'utilise le module ng-file-upload, qui me fournit une drop-zone et la possibilité d'envoyer dplusieures images à la fois. Le module marche très bien.

Je dois également récuperer les données EXIF des photos lors de la sélection et les envoyer avec $http.post. J'utilise pour cela exif.js, pour lire ces données et sélectionner celles qui m'interessent.

Comme il s'agit d'un seul envoie $http.post, je voudrai envoyer un tableau multidimensionnel ou chaque valeur contient les données d'une photo, sous cette forme :
exif = [0: {
marque:...,
modele:...,
....},
1:{
marque:...,
modele:...,
....},
2:{...}
]


Et... je n'y arrive pas ! J'ai le nez dedans depuis le début de la semaine, je vois pas la solution..

Je vous soumet mon code, si quelqu'un à un avis, je suis intéressé !!


app.controller('uploadCtrl', ['$scope', 'Upload', '$timeout', '$http', function($scope, Upload, $timeout, $http) {


  // recup EXIF =====================================================================
  $scope.getExif = function(files) {
    $scope.files = files;
    $scope.exif = new Array();
    EXIF.getData(files, function() {
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        $scope.exif[i] = new Object();
        $scope.exif[i].marque = EXIF.getTag(file, "Make");
        $scope.exif[i].modele = EXIF.getTag(file, "Model");
        $scope.exif[i].iso = EXIF.getTag(file, "ISOSpeedRatings");
        $scope.exif[i].fnumber = 'f:' + (EXIF.getTag(file, "FNumber"));
        $scope.exif[i].vit_obt = '1/' + Math.pow(EXIF.getTag(file, "ExposureTime"), -1);
        $scope.exif.push($scope.exif[i]);
      }
    })
  };



  // upload=======================================================
  $scope.uploadFiles = function(files) {

    if (files && files.length) {
      $scope.files = files;
      Upload.upload({
          url: 'php/managePhoto.php',
          method: 'POST',
          file: files,
          data: {
            categorie: $scope.categorie,
            s_categorie: $scope.s_categorie,
            galerie: $scope.galerie,
            user: $scope.user,
            exif: $scope.exif
          }
        })
        .then(function(response) {
          $timeout(function() {
            $scope.result = response.data;
          });
        }, function(response) {
          if (response.status > 0) {
            $scope.errorMsg = response.status + ': ' + response.data;
          }
        }, function(evt) {
          $scope.progress =
            Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
        });
    }
  };

  // envoie des données par SUBMIT ================================================
  $scope.submit = function() {
    $scope.uploadFiles($scope.files)
  };

}]);


Merci !! Smiley cligne [/i][/i][/i][/i][/i][/i][/i][/i]
Modifié par EDBZ (01 Jul 2016 - 10:45)
On m'a donné la solution : le problème venait de ma boucle à l'intérieur du callback...
$scope.files = files;
$scope.data = [];
angular.forEach(files, function (file) {
    EXIF.getData(file, function () {
        console.log('img : ', this);
        var tags = EXIF.getAllTags(this);
        $scope.data.push({
            'marque': tags.Make,
            'modele': tags.Model,
            'iso': tags.ISOSpeedRatings,
            'fnumber': tags.FNumber,
            'vit_obt': '1/' + Math.pow(tags.ExposureTime, - 1)
        });
    });
});
$scope.affiche($scope.data);
Sujet clos
Aller à