Angular Couldn't find .dropify()

[Arunaliyanaarachchi]

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
import {dropify} from 'dropify';

@component({
selector: 'app-picture-upload',
templateUrl: './picture-upload.component.html',
styleUrls: ['./picture-upload.component.css']
})
export class PictureUploadComponent implements OnInit {
title = 'Look jQuery Animation working in action!';

constructor() { }

ngOnInit() {

$(document).ready(function(){
  // Basic
  $('.dropify').dropify();


  // Used events
  var drEvent = $('.dropify-event').dropify();

  drEvent.on('dropify.beforeClear', function(event, element){
      return confirm("Do you really want to delete \"" + element.filename + "\" ?");
  });

  drEvent.on('dropify.afterClear', function(event, element){
      alert('File deleted');
  });

});

}

}

This is my .ts class and trying to used this library in Angular 8 it giving me bellow issue

Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_2__(...).dropify is not a function
at HTMLDocument. (picture-upload.component.ts:21)
at mightThrow (jquery.js:3557)
at process (jquery.js:3625)
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Zone.runTask (zone-evergreen.js:168)
at invokeTask (zone-evergreen.js:465)
at ZoneTask.invoke (zone-evergreen.js:454)
at timer (zone-evergreen.js:2650)

and this is my angular.json file imports
...................
],
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [

          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js",
          "node_modules/dropify/dist/js/dropify.js"

        ]

...................................

HTML file

Drag and drop a file here or click

Ooops, something wrong appended.

Remove

23131693_10214256979043653_6077277616315710275_n.jpg

Drag and drop or click to replace