import { Component , Input , Output , HostListener , EventEmitter , ElementRef , HostBinding } from '@angular/core' ; import * as loadImage from 'blueimp-load-image' ; import { NotificationsService } from '../../core/notifications/notifications.service' ; import { TranslateService } from '@ngx-translate/core' ; import { UtilsService } from '../../core/utils/utils.service' ; @ Component ( { selector : 'app-image-upload' , templateUrl : './image-upload.component.html' , styleUrls : [ './image-upload.component.scss' ] } ) export class ImageUploadComponent { @ Input ( ) set imageFile ( file ) { if ( file ) { this . displayImage ( file ) ; } } @ Input ( ) set appImageUploadDisabled ( val ) { this . isDisabled = val ; } @ Output ( ) imageFileChange = new EventEmitter < File > ( ) ; @ HostBinding ( 'class.is-disabled' ) isDisabled = false ; public dragOver = false ; public dragHidden = false ; public dragLoading = false ; public dragDisabled = false ; public imageSrc = '' ; public maxSize = 800 ; constructor ( private el , private notificationService , private translate , private utils ) { } @ HostListener ( 'document: dragover' , [ '$event' ] ) @ HostListener ( 'document: dragenter' , [ '$event' ] ) public onDragOver ( event ) { if ( this . el . nativeElement . contains ( event . target ) ) { this . dragOver = true ; this . dragLoading = false ; this . dragHidden = false ; this . preventAndStopEventPropagation ( event ) ; } } @ HostListener ( 'document: dragleave' , [ '$event' ] ) @ HostListener ( 'document: dragend' , [ '$event' ] ) @ HostListener ( 'document: drop' , [ '$event' ] ) public onDragLeave ( event ) { if ( this . el . nativeElement . contains ( event . target ) ) { if ( this . dragDisabled ) { this . preventAndStopEventPropagation ( event ) ; return ; } this . dragOver = false ; if ( event . type === 'drop' && event . dataTransfer . files . length !== 0 ) { const file = event . dataTransfer . files [ 0 ] ; loadImage . parseMetaData ( file , ( data ) => { let orientation = 0 ; if ( data . exif ) { orientation = data . exif . get ( 'Orientation' ) ; } const loadingImage = loadImage ( file , ( canvas ) => { const dataUrl = canvas . toDataURL ( ) ; this . imageSrc = dataUrl ; this . utils . fileFromDataURL ( dataUrl , file . name ) . then ( ( finalFile ) => { this . imageFileChange . emit ( finalFile ) ; } ) ; } , { canvas : true , orientation : orientation } ) ; loadingImage . onerror = ( ) => { this . notificationService . error ( this . translate . instant ( 'SHARED.IMG_UPLOAD.TS.ERROR' ) ) ; console . warn ( this . translate . instant ( 'SHARED.IMG_UPLOAD.TS.WARN' ) ) ; this . imageSrc = '' ; } ; } ) ; } this . preventAndStopEventPropagation ( event ) ; } } public manualUpload ( evt ) { const fileList = evt . target . files ; if ( fileList . length !== 0 ) { const file = fileList [ 0 ] ; loadImage . parseMetaData ( file , ( data ) => { let orientation = 0 ; if ( data . exif ) { orientation = data . exif . get ( 'Orientation' ) ; } const loadingImage = loadImage ( file , ( canvas ) => { const dataUrl = canvas . toDataURL ( ) ; this . imageSrc = dataUrl ; this . utils . fileFromDataURL ( dataUrl , file . name ) . then ( ( finalFile ) => { this . imageFileChange . emit ( finalFile ) ; } ) ; } , { canvas : true , orientation : orientation } ) ; loadingImage . onerror = ( ) => { this . notificationService . error ( this . translate . instant ( 'SHARED.IMG_UPLOAD.TS.ERROR' ) ) ; console . warn ( this . translate . instant ( 'SHARED.IMG_UPLOAD.TS.WARN' ) ) ; this . imageSrc = '' ; } ; } ) ; } } private displayImage ( file ) { return new Promise ( ( resolve , reject ) => { const fileReader = new FileReader ( ) ; this . dragLoading = true ; fileReader . onload = ( e ) => { this . dragLoading = false ; this . imageSrc = fileReader . result as string ; resolve ( file ) ; } ; fileReader . onerror = ( ( err ) => { reject ( err ) ; } ) ; fileReader . readAsDataURL ( file ) ; } ) ; } private preventAndStopEventPropagation ( event ) { event . preventDefault ( ) ; event . stopPropagation ( ) ; } }