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": [
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() {
});
}
}
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": [
...................................
HTML file
23131693_10214256979043653_6077277616315710275_n.jpg