search

JeremyFagis / dropify

Override your input files with style — Demo here : http://jeremyfagis.github.io/dropify
MIT License
974 stars 399 forks source link

Angular Couldn't find .dropify() #106

Open Arunaliyanaarachchi opened 5 years ago

Arunaliyanaarachchi commented 5 years ago

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.