Unable to find option to processQueue manually

[AtulCIS]

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?

[sconix]

You are most likely not using the ViewChild correctly, do you have #drpzone="ngxDropzoneDirective" in your template?

[AtulCIS]

No, when I am adding it then getting this error in browser console "There is no directive with "exportAs" set to ngxDropzoneDirective"

[sconix]

Sorry my bad, ngxDropzone would be the correct way to reference it.

[AtulCIS]

Yes , Now I am getting output from console.log(this.drpzone); but still this.drpzone.dropzone() or this.drpzone.dropzone.processQueue() is not working

[sconix]

The call this.drpzone.dropzone() returns the Dropzone instance and from there onward its about how to use Dropzone and not about this wrapper.

[AtulCIS]

Yes its not returning me the Dropzone instance instead of the returning this error

ERROR TypeError: this.drpzone.dropzone is not a function

[sconix]

Then either the element in your template you are referencing to is not a DropzoneDirective or you are not using the 5.x version of this library.

[AtulCIS]

See this my code in component.ts file

import { DropzoneModule ,DropzoneComponent , DropzoneDirective, DropzoneConfigInterface } from 'ngx-dropzone-wrapper';

@ViewChild('drpzone') drpzone: DropzoneDirective; submit_conversation_form(){ console.log(this.drpzone.dropzone()); }

this my template.html

<div fxLayout="column" fxLayout.xs="column"> <dropzone #drpzone="ngxDropzone" [config]="config" [message]="'Click or drag images here to upload'" (error)="onUploadError($event)" (success)="onUploadSuccess($event)" (sending)="onSending($event)"></dropzone> </div>

and this my package.json file

"ngx-dropzone-wrapper": "5.3.5",

[sconix]

So you are using the component not the directive. The directive is exposed as directiveRef within the component. If you need more info check the example app.

[AtulCIS]

Yes I have checked it but I didn't find how can I processQueue manually along with form fields

[sconix]

Yes but the example app shows you how to actually use the component reference to get the directive reference. And as said from Dropzone instance onwards its about Dropzone usage which I can not help you with since I am not a Dropzone expert.

[AtulCIS]

Ok do you have any app or example where someone performs processQueue manually I mean with autoProcessQueue : false ?

[sconix]

For that you need to look for from Dropzone repository / forums etc. I am sure there are plenty of examples for Dropzone in the Internet. I only document / have examples for using the wrapper specific features not for using Dropzone itself.

[yura-moryliak]

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

Code: component.ts: 1) import { DropzoneModule ,DropzoneComponent , DropzoneDirective, DropzoneConfigInterface } from 'ngx-dropzone-wrapper'; 2) @ViewChild(DropzoneComponent) drpzone: DropzoneComponent; 3) 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>

[AtulCIS]

thanks @yura-moryliak but how can I append form fields into formdata after this this.drpzone.directiveRef.dropzone().processQueue();

[yura-moryliak]

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

[AtulCIS]

Yes I did the same , I have append all my form field values in onSending method but as you mentioned a function "onClick()" I am hitting the API inside this function so how I can pass the formdata variable to the API call ?

[AtulCIS]

this is my code for onSending event `onSending(data): void { // data [ File , xhr, formData] const data1 = this.step2Form.getRawValue(); const file = data[0]; const formData = data[2]; formData.append('topic',data1['topic']); formData.append('content',data1['content']);

formData.append('sender',data1['sender']);
formData.append('receiver',data1['sender']);
formData.append('path',file);

this.formdatavalues = formData;

} ` and this is submit function

`submit_conversation_form(){ this.drpzone.directiveRef.dropzone().processQueue(); this._verificationService.SubmitConversation(this.formdatavalues).subscribe( response => { console.log(response); }, err => console.error(err) );

}` So I want formdata value while passing data to API.

[yura-moryliak]

well, you do not have to hit API with subscription inside onClick(), this is only for triggering processQueue after user will fill in all your angular form, what about onSending($event) you should grab all your formData in a backend side (in my case it's Express) inside req.body, and you can send back you data form backend to client in res.json, so onUploadSuccess(event) will return your data, hope this is what you were searching for

[AtulCIS]

thanks @yura-moryliak you have solved my problem!!!!! Can I ask you last question , In my case I am adding "Authorization Bearer" in my request but as you know about the dropzone configuration we need to add url like this

const DEFAULT_DROPZONE_CONFIG: DropzoneConfigInterface = { // Change this to your upload POST address: url: "#", maxFilesize: 50, acceptedFiles: 'image/*', autoProcessQueue : false, uploadMultiple: true, parallelUploads: 10, };

but I cant add API url here because I am passing headers as well , see this https://prnt.sc/iwfaf8 , url : # setting causing this. I am very thankful for all your help.

[yura-moryliak]

AtulCIS your welcome :) About Auth headers, i can't really help you with this, i have not bothering with that, i'm not actually compatible in this question at least for now, sorry! Have a nice coding day ;)

[Kinjalbagaria]

@AtulCIS I am integrating same package with angular 4 and my functionality is almost same like yours. So can you please provide me with you component.ts file or code reference that how you have call processQueue of dropzone.

I would be very much thankful to you

[AtulCIS]

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 }`

[Kinjalbagaria]

@AtulCIS Thank you so much for Code!

I have followed same steps but still its giving me "this.drpzone.directiveRef.dropzone is not a function" so can you please tell me we should define this anywhere else ? drpzone should be defined anywhere in componenet?

[AtulCIS]

No, drpzone should be in your html code like this #drpzone="ngxDropzone" , Did you import DropzoneComponent and DropzoneDirective in component ?

[Kinjalbagaria]

@AtulCIS Yes I have imported. import { DropzoneModule ,DropzoneComponent , DropzoneDirective, DropzoneConfigInterface } from 'ngx-dropzone-wrapper';

what is there in your module.ts file? where you have defined config for your dropzone?

[AtulCIS]

please share your code here so I can check it..

[sconix]

The version 4 has different API for getting the dropzone instance, check the README.

[mkginfo]

I am also facing same issue in Angular 6. Kindly share reference code for this.drpzone.directiveRef.dropzone().processQueue();

package.json

"@angular/animations": "^6.1.10",
"@angular/cdk": "^6.4.7",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/flex-layout": "^6.0.0-beta.18",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/material": "^6.4.7",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"ngx-dropzone-wrapper": "^6.2.0",

[jigneshInd]

does anyone find solution for it?

[sconix]

Depends what you mean, the using of the reference is even shown in the example app and if you mean about how to use processQueue then better place for getting help is Dropzone related pages.