zefoy / ngx-dropzone-wrapper

Angular wrapper library for Dropzone
MIT License
174 stars 51 forks source link

How to implementation accept function in angular #103

Open dreamid27 opened 6 years ago

dreamid27 commented 6 years ago

Hi, thank for your awesome plugin.

but I need help, how implement this in angular app ?

https://github.com/enyo/dropzone/wiki/FAQ#reject-images-based-on-image-dimensions

var maxImageWidth = 800, maxImageHeight = 800;

Dropzone.options.myDropzone = {

// Make sure only images are accepted acceptedFiles: "image/*",

init: function() { // Register for the thumbnail callback. // When the thumbnail is created the image dimensions are set. this.on("thumbnail", function(file) { // Do the dimension checks you want to do if (file.width > maxImageWidth || file.height > maxImageHeight) { file.rejectDimensions() } else { file.acceptDimensions(); } }); },

// Instead of directly accepting / rejecting the file, setup two // functions on the file that can be called later to accept / reject // the file. accept: function(file, done) { file.acceptDimensions = done; file.rejectDimensions = function() { done("Invalid dimension."); }; // Of course you could also just put the done function in the file // and call it either with or without error in the thumbnail event // callback, but I think that this is cleaner. } };

i'm try with

this.dropzonePicture.directiveRef.dropzone().accept(function(file, done) { console.log(file); });

but not working. you have solution or did i miss something ?

i try to call emit, it's working, but it's not.

ktwbc commented 6 years ago

Just put it in your config block, then write your function normally in your component

  config: DropzoneConfigInterface = {
    // Change this to your upload POST address:
    url: this.setUrl(),
    maxFilesize: 50,
    acceptedFiles: 'image/*',
    method: 'POST',
    uploadMultiple: false,
    accept: (file, done) => {
      this.onAccept(file, done);
    }
  };

  onAccept(file: any, done: Function) {
    console.log('Fetching upload policy and url and stuff');

    this.apiService.requestData('getmypolicyurl/' + file.name)
      .subscribe((result) => {
        console.log(result);
        done();
      });
  }