dropzoneJS dans angulars : dzMethods is undefined

Bonjour,

Dans une appli en AngularJS j'utilise DropZoneJS dans un formulaire et je me suis rendue compte il y a peu qu'elle ne fonctionne plus (sans que je ne change rien!). A l'envoies du formulaire la console sort un

Code:

1
2
3
4
5
6
7
8
9
TypeError: Cannot read property 'getAllFiles' of undefined
    at Scope.$scope.submitForm (add.js:37)
    at fn (eval at compile (angular.js:15358), <anonymous>:4:217)
    at callback (angular.js:26994)
    at Scope.$eval (angular.js:18161)
    at Scope.$apply (angular.js:18261)
    at HTMLFormElement.<anonymous> (angular.js:26999)
    at HTMLFormElement.dispatch (jquery.js:4435)
    at HTMLFormElement.elemData.handle (jquery.js:4121)

J'ai beau cherche dans l'ancienne version où dzMethods était définit dans l'appli, pas moyen de trouver (ce n'ai pas mon code, je remplace un dev dans la boite donc....)

Quelqu'un a-t-il une idée ?

Dropzone est bien importé dans l'index :

Voici le controller du formulaire et le formulaire :

Code:

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
'use strict';
/**
 * @ngdoc function
 * @name extranetApp.controller:UserAddCtrl
 * @description
 * # UserAddCtrl
 * Controller of the extranetApp
 */
angular.module('extranetApp')
        .controller('AddCtrl', function ($scope, VarService, $translate, $uibModalInstance, type, data, textAngularManager, RPCService, $uibModal) {
          var $ctrl = this;
          $ctrl.type = type;
          $ctrl.data = data;
          console.log($scope);
 
          $scope.form = { };
 
          if ($ctrl.type == "incident") {
            $scope.header = "OPEN_NEW_INCIDENT";
          } else if ($ctrl.type == "foldermsg") {
            $scope.header = "CUST_ADD_INFOS";
            $scope.disableSubect = true;
            $scope.form.subject = `msg: ${$ctrl.data.subject}`;
          } else if ($ctrl.type == "usermsg") {
            $scope.header = "CUST_ADD_INFOS";
            $scope.disableSubect = true;
            $scope.form.subject = `msg: ${$ctrl.data.firstname} ${$ctrl.data.lastname}` ;
          }
 
          //console.log
          $scope.dzOptions = VarService.getDzOptions();
 
          $scope.submitForm = function (form) {
            if ($scope.addForm.$valid) {
              console.log($scope);
              console.log($scope.dzMethods);
              var files = $scope.dzMethods.getAllFiles();
              if (files) {
                form.attachments = [];
                angular.forEach(files, function (file) {
                  if (file.accepted) {
                    var reader = new FileReader();
                    // Closure to capture the file information.
                    reader.onload = function (e) {
                      //get the base64 url
                      var base64URL = e.target.result;
                      var attach = { "name": file.name, "content": base64URL.split(',')[1] };
                      form.attachments.push(attach);
                    };
                    // Read in the image file as a data URL.
                    reader.readAsDataURL(file);
                  }
                });
              }
              switch ($ctrl.type) {
                case "incident":
                  console.log(form);
                  createIncident(form);
                  break;
                case "foldermsg":
                  form.unid = $ctrl.data.unid;
                  addFolderMessage(form);
                  break;
                case "usermsg":
                  form.unid = $ctrl.data.unid;
                  addUserMessage(form);
                  break;
              }
            }
          };
          function createIncident(incident) {
            RPCService.dossier.new(incident).then(function (data) {
              $scope.formSend = "INCIDENT.CONFIRM_DECLARATION";
            });
          }
 
          function addFolderMessage(message) {
            RPCService.dossier.message(message.unid, message).then(function (data) {
              console.log(message);
              $scope.formSend = "INFO_SEND";
            });
          }
 
          function addUserMessage(message) {
            RPCService.user.message(message.unid, message).then(function (data) {
              $scope.formSend = "INFO_SEND";
            });
          }
 
          function openConfirmModal(items) {
            $uibModal.open({
              animation: true,
              ariaLabelledBy: 'modal-title',
              ariaDescribedBy: 'modal-body',
              templateUrl: 'views/modal/confirm.html',
              controller: 'ModalInstanceCtrl',
              controllerAs: '$ctrl',
              size: 'md',
              resolve: {
                data: { },
                items: function () {
                  return items;
                }
              }
            });
          }
 
          $ctrl.ok = function () {
            $uibModalInstance.close($scope.newStatus);
          };
          $ctrl.cancel = function () {
            $uibModalInstance.dismiss('cancel');
          };
        });

Template HTML (dropzone ligne 34)

Code:

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
<div class="modal-header">
  <button type="button" class="close" ng-click="$ctrl.cancel()" data-dismiss="modal" aria-hidden="true">×</button>
  <h3 class="modal-title" id="modal-title">{{ header | translate }}</h3>
</div>
 
<form ng-submit="submitForm(form)" name="addForm" role='form' class="addIncidentForm" novalidate>
  <div class="modal-body row" id="modal-body">
    <!-- subject -->
    <div class='form-group' class="form-item" ng-class="{
        'has- error': (addForm.$submitted || addForm.subject.$touched) && addForm.subject.$error.required}">
      <label class="formLabel">
        <span class="margin-l-5">{{ "SUBJECT" | translate }} :</span>
        <span ng-show="(addForm.$submitted || addForm.subject.$touched) && addForm.subject.$error.required">{{"FORM_ELM_REQ_MISS"| translate}}</span>
      </label>
 
      <input ng-model="form.subject" name="subject" required type="text" class="form-control" placeholder="Sujet" ng-disabled="disableSubect">
    </div>
 
    <!-- instructions -->
    <div class='form-group' class="form-item" ng-class="{
        'has- error': (addForm.$submitted || addForm.object.$touched) && addForm.object.$error.required}">
      <label class="formLabel">
        {{ "DESCRIPTION" | translate }} :
        <span ng-show="(addForm.$submitted || addForm.object.$touched) && addForm.object.$error.required">{{"FORM_ELM_REQ_MISS"| translate}}</span>
      </label>
      <div ng-if="inDevEnv == 1" text-angular name='objectRich' required ng-model="form.objectRich"></div>
      <textarea rows="5" ng-model="form.object" name="object" class="form-control" required></textarea>
    </div>
 
    <!-- attachments -->
    <div ng-if="inDevEnv == 1" class='form-group'>
      <label>{{ "UPLOAD_FILES" | translate }} :</label>
      <span class="pull-right">{{"ACCEPTED_FILES"| translate}} : {{dzOptions.acceptedTextFiles}} ({{dzOptions.maxFilesize}}{{"MB_MAX"| translate}})</span>
      <div class="dropzone" options="dzOptions" callbacks="dzCallbacks" methods="dzMethods" ng-dropzone></div>
 
    </div>
 
    <h4 ng-show="formSend" translate="{{formSend}}" translate-value-fullname="{{formSend.msg}}"></h4>
 
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-danger"  ng-click="$ctrl.cancel()" ng-show="!formSend" data-dismiss="modal">{{ "CANCEL" | translate }}</button>
    <button type='submit' class="btn btn-success pull-right" ng-show="!formSend">{{ "INCIDENT_NEW_SUBMIT" | translate }}</button>
    <button type="button" class="btn btn-primary"  ng-show="formSend" ng-click="$ctrl.ok()">OK</button>
  </div>
</form>