Encountering an issue while attempting to add a new object to the attachments parameter. Despite successfully pushing the object into the array in the success function of dropzone, it does not reflect in the ng-repeat within template.html.
If you observe closely, the object is pushed into the array but the list doesn't update accordingly.
Any assistance would be greatly appreciated.
directive.js
(function() {
"use strict";
module.exports = attachments;
function attachments($auth) {
var _token = "Bearer" + " " + $auth.getToken();
return {
restrict: 'EA',
scope: {
objectType: '@',
objectId: '=',
attachments: '='
},
transclude: true,
templateUrl: 'template.html',
replace: true,
link: function(scope, element, attrs) {
element.find(".drop").first().dropzone({
url: '<url>',
multiple: true,
uploadMultiple: false,
headers: {
"Authorization": _token
},
init: function(){
this.on("success", function (file) {
this.removeAllFiles();
});
},
success: function(file, response){
scope.attachments.push(response);
},
sending: function(file, xhr, data){
data.append("object_id", scope.objectId);
data.append("object_type", attrs.objectType);
}
});
}
}
}
attachments.$inject = ['$auth'];
})();
template.html
<div class="cirons-upload">
<div class="drop"></div>
<ul class="list" id="preview_list">
</ul>
<ul class="list">
<li ng-repeat="file in attachments">
<a href="#">{{file.file_name}}</a>
</li>
</ul>
</div>
page.html The object invoice has id as integer and attachments as an array.
<cirons-attachments
object-id="invoice.id"
object-type="Invoice"
attachments="invoice.attachments"
></cirons-attachments>