javascript - How to show files already stored on server with Dropzone in Angularjs -

i use directive render dropzone.js in page:

angular.module('dropzone', []).directive('dropzone', function () {   return function (scope, element, attrs) {     var config, dropzone;      config = scope[attrs.dropzone];      // create dropzone element given options     dropzone = new dropzone(element[0], config.options);      // bind given event handlers     angular.foreach(config.eventhandlers, function (handler, event) {       dropzone.on(event, handler);     });   }; }); 

and in controller use code:

angular.module('app', ['dropzone']);  angular.module('app').controller('somectrl', function ($scope) {   $scope.dropzoneconfig = {     'options': { // passed dropzone constructor       'url': 'upload.php'     },     'eventhandlers': {       'sending': function (file, xhr, formdata) {       },       'success': function (file, response) {       }     }   }; }); 

in dropzone show files stored on server use mockfile , this.emit this. how this , run emit function?

i solved problem this:

'use strict';  angular.module('dropzone', []).directive('dropzone', function ($timeout) {     return {         restrict:'ae',         require: 'ngmodel',         link:function (scope, element, attrs, ngmodel) {             var init = function () {                 var config, dropzone;                  config = scope[attrs.dropzone];                  // create dropzone element given options                 dropzone = new dropzone(element[0], config.options);                   // display existing files on server                 if(ngmodel.$viewvalue !=='' && ngmodel.$viewvalue !==undefined){                     var mockfile = {name: ngmodel.$viewvalue, size: 1234};                     dropzone.emit("addedfile", mockfile);                     dropzone.createthumbnailfromurl(mockfile, "uploads/" + ngmodel.$viewvalue);                     dropzone.emit("complete", mockfile);                 }                  // form submit rest dropzone event handler                 scope.$on('dropzone.removeallfile', function() {                     dropzone.removeallfiles();                 });                   // bind given event handlers                 angular.foreach(config.eventhandlers, function (handler, event) {                     dropzone.on(event, handler);                 });             };             $timeout(init, 0);         }     } }); 

and in controller:

$scope.dropzoneconfig = {         options: { // passed dropzone constructor             url: '/api/uploadimage',             paramname: "file", // name used transfer file             maxfilesize: .5, // mb             acceptedfiles: 'image/jpeg,image/png,image/gif',             maxfiles: 1,         },         'eventhandlers': {             'removedfile': function (file,response) {                 $http({                     method : "post",                     url : "/api/uploadimage/"+$scope.customer.avatar_url                 }).then(function mysucces(response) {                     $scope.deletemessage = response.data;                     $scope.customer.avatar_url='';                 });             },             'success': function (file, response) {                 $scope.customer.avatar_url = response.filename;             }         }     }; 

and in html:

<div ng-if="customer.avatar_url!==undefined" ng-model="customer.avatar_url" dropzone="dropzoneconfig" class="dropzone"></div>