ngx-dropzone-wrapper: Unable to find option to processQueue manually

I am using dropzone (“ngx-dropzone-wrapper”: “5.3.5”) with Angular 5, Here i need to processQueue manually by adding two input data from user. But i am unable to find the option to do so. below small code snippet which i am using @ViewChild('drpzone') drpzone: DropzoneDirective; submit_conversation_form(){ console.log(this.drpzone); } The console returns undefined here. When i use this.drpzone.dropzone() it gives error that “Cannot read property ‘dropzone’ of undefined”. Can you please let me what i am doing wrong?

About this issue

Original URL
State: open
Created 6 years ago
Comments: 31 (9 by maintainers)

Most upvoted comments

Here is working code for me if what: version: “ngx-dropzone-wrapper”: “^5.3.5”,

Code: component.ts:

import { DropzoneModule ,DropzoneComponent , DropzoneDirective, DropzoneConfigInterface } from ‘ngx-dropzone-wrapper’;
@ViewChild(DropzoneComponent) drpzone: DropzoneComponent;
onClick() { this.drpzone.directiveRef.dropzone().processQueue(); } template.html: <dropzone class=“dropzone” #drpzone [message]=“‘Click or drag images here to upload’” (error)=“onUploadError($event)” (success)=“onUploadSuccess($event)”></dropzone>

yura-moryliak on Mar 24, 2018

Yeah sure , please go through my code. component.html

<dropzone class="dropzone" #drpzone="ngxDropzone" [config]="config" [message]="'Click or drag images here to upload'" (success)="onUploadSuccess($event)" (sending)="onSending($event)"></dropzone>

component.ts submit_conversation_form , this function will be called when you click on Submit function.

`@ViewChild(DropzoneComponent) drpzone: DropzoneComponent; @ViewChild(DropzoneDirective) directiveRef: DropzoneDirective;

submit_conversation_form(){ this.drpzone.directiveRef.dropzone().processQueue(); }

` onSending(data): void { // data [ File , xhr, formData] const form_data = this.step2Form.getRawValue(); const file = data[0]; const formData = data[2]; if (form_data){ formData.append(‘topic’,form_data[‘topic’]); formData.append(‘content’,form_data[‘content’]); }

if (file){
    formData.append('path',file);
}

//pass formData from here to your API }`

AtulCIS on Mar 27, 2018

there is (success)=“onSending($event)” event for dropzone, here is example:

template.html <dropzone class=“dropzone” #drpzone [config]=“config” [message]=“‘Click or drag images here to upload’” (sending)=“onSending($event)” (error)=“onUploadError($event)” (success)=“onUploadSuccess($event)”></dropzone>

component.ts

onSending(data) { const formData = data[2];

for (let prop in object) {
  formData.append(prop, object[prop]);
}

}

since FormData is accepting (key, value) pair you need to iterate over object and append your form fields values into formData

yura-moryliak on Mar 26, 2018