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

**-EDBZ-** · 01/07/2016, 10h43

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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
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é !!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
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 !!

Invité · 04/07/2016, 14h09

Bonjour, Voici une tentative de réponse, je ne garantis pas qu'elle fonctionne...

Soit $scope.exif un tableau [] vide,

Alors, il faut utiliser la fonction push() pour y insérer des objets JSON {} de manière additive :

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$scope.exif.push({'monObjet1':'contenu'});
$scope.exif.push({'monObjet2':'contenu2'});

ce qui nous donne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$scope.exif =[{'monObjet1':'contenu'},{'monObjet2':'contenu2'}];

Sachant que les variables contenu et contenu2 peuvent être obtenues par la valeur de retour d'une fonction comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$scope.exif =[{'monObjet1':getContenu()},{'monObjet2':getContenu2()}];

, j'en déduis que la boucle FOR est indiquée dans ton cas, pour "pusher" les objets à la suite dans le tableau.

Voici donc, à vue de nez comment j'essayerais de faire, moi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
var x = 0;
for(x=0;x<$scope.files.length;x++){
        $scope.exif.push({'marque':EXIF.getTag($scope.files[x], "Make")},{'modele':EXIF.getTag($scope.files[x], "Model")},{'iso':EXIF.getTag($scope.files[x], "ISOSpeedRatings")});
}

Je ne mets pas toutes les catégories dans le PUSH(), c'est trop long à écrire là...

Je sais pas, moi je testerais un truc comme ça pour un seul fichier ... Le problème étant que, vu que c'est un upload multiple, il faudrait probablement créer une boucle for imbriquée qui traite chaque fichier uploadé, et là... Sans être devant le programme, je vois pas trop.. ou alors, faudrait faire $scope.exif.fichier1.push(bla bla) puis $scope.exif.fichier2.push(bla bla) mais dans la boucle for, et retrouver le nom de chaque fichier avant de spécifier ses données exif

**NoSmoking** · 05/07/2016, 19h34

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
EXIF.getData(files, function() {
  for (var i = 0; i < files.length; i++) {

tu ne peux pas faire la boucle dans la function callBack qui ne traite de toutes façons que l'élément lui même.

Il te faut faire la boucle autour de la fonction, par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$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);