import * as angular from 'angular' ; import { DropzoneController } from './DropzoneController' ; import Dropzone = require ( 'dropzone' ) ; /**
 * Define new interface to allow accessing '$ctrl' from scope
 * https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18196
 */ interface IDropzoneDirectiveScope extends ng . IScope { $ctrl : DropzoneController ; } /**
 * The DropzoneDirective class has access to the parent
 * controller scope.
 */ export class DropzoneDirective implements ng . IDirective { /**
     * Match class name.
     */ public restrict : string = 'C' ; /**
     * Update the DOM to implement the directive.
     */ public link ( scope , element , attrs ) { let dropzoneConfig = { url : scope . $ctrl . config . url , maxFilesize : 102400 , addRemoveLinks : true , dictCancelUpload : 'Cancel' , dictDefaultMessage : 'Click here or Drop files here to upload' , timeout : 0 , filesizeBase : 1024 , canceled : canceledCallback } ; function canceledCallback ( file ) { if ( file . uploadCompleted === false ) { scope . $ctrl . backend . cancelUpload ( { file : file } ) . then ( ( data ) => { console . log ( 'Filed upload canceled: ' + file . name ) ; } ) ; } } let eventHandlers = { 'uploadprogress' : function ( file ) { scope . $ctrl . toggleWorking ( { state : true } ) ; } , 'success' : function ( file ) { scope . $ctrl . onRefresh ( { } ) ; this . removeFile ( file ) ; } , 'complete' : function ( file ) { if ( this . getAddedFiles ( ) . length === 0 && this . getUploadingFiles ( ) . length === 0 && this . getQueuedFiles ( ) . length === 0 ) { this . emit ( 'queuecomplete' ) ; } } , 'error' : function ( file , errorMessage , xhr ? ) { console . log ( 'An error has occurred: ' + errorMessage ) ; if ( xhr ) { console . log ( xhr ) ; } } , 'reset' : function ( ) { scope . $ctrl . toggleWorking ( { state : false } ) ; } , 'queuecomplete' : function ( ) { scope . $ctrl . toggleWorking ( { state : false } ) ; scope . $ctrl . onRefresh ( { } ) ; window . onbeforeunload = null ; } } ; let dropzone = new Dropzone ( element [ 0 ] , dropzoneConfig ) ; angular . forEach ( eventHandlers , ( handler , event ) => { dropzone . on ( event , handler ) ; } ) ; Dropzone . prototype . uploadFiles = function ( files ) { window . onbeforeunload = function ( ) { return true ; } ; for ( let i = 0 ; i < files . length ; i ++ ) { let file = files [ i ] ; let key = scope . $ctrl . backend . getFilePath ( scope . $ctrl . folder , file ) ; scope . $ctrl . backend . uploadFile ( { Bucket : scope . $ctrl . config . fields . bucket , Key : key , Body : file , Dropzone : this } ) . then ( ( res ) => { if ( res . err ) { file . status = Dropzone . ERROR ; dropzone . emit ( 'error' , file , res . err . message ) ; dropzone . emit ( 'complete' , file ) ; } else { file . uploadCompleted = true ; file . status = Dropzone . SUCCESS ; dropzone . emit ( 'success' , file ) ; dropzone . emit ( 'complete' , file ) ; } if ( this . options . autoProcessQueue ) { dropzone . processQueue ( ) ; } } ) ; } } ; } }