CODEWITHSUNDEEP
angulardropzone.js
Midhun P
Midhun P

Reputation: 126

How to upload image using dropzone in angular 4 on button click

Iam using dropzone for uploading image into a webApi from angular 4 application on button click event. mydrpzone.processQueue() is not working . On upload button click I got this error this.drpzone.processQueue is not a function.

Here is my code

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { DropzoneModule, DropzoneComponent, DropzoneDirective, 
DropzoneConfigInterface } from 'ngx-dropzone-wrapper';


@Component({
selector: 'my-app',
templateUrl: `./app.component.html`,
styleUrls: ['./app.component.css']
})
export class AppComponent {

UsreName: string = "Midhun";
@ViewChild('drpzone') drpzone: DropzoneConfigInterface;



myFiles: string[] = [];
sMsg: string = '';

getFileDetails(e: any) {

    //console.log (e.target.files);
    for (var i = 0; i < e.target.files.length; i++) {
        this.myFiles.push(e.target.files[i]);
    }


}

onSending(data: any): void {
    // data [ File , xhr, formData]
    const file = data[0];
    const formData = data[2];
    formData.append('Name', "Midhun");
    console.log("enetered");
}

uploadFiles() {
    //this.drpzone.processQueue();
    this.drpzone.processQueue();
    console.log("uploading...");
}

onSendingmultiple() {

}

onError() {

}
onSuccess() {

}


//public type: string = 'component';
public type: string = 'directive';

public config: DropzoneConfigInterface = {
    url: 'http://localhost:60945/api/fileupload/',
    //url: 'http://localhost:60945/user/PostUserImage',
    //url:'https://httpbin.org/post',
    maxFiles: 5,
    clickable: true,
    acceptedFiles: 'image/*',
    createImageThumbnails: true,
    autoProcessQueue: false,
    addRemoveLinks: true,

};

constructor() { }


}

app.component.html

<div class="text-center well">
            <dropzone [config]="config" #drpzone
                      [message]="'Click or drag images here to upload'"
                      (error)="onError($event)"
                      (sending)="onSending($event)"
                      (sendingmultiple)="onSendingmultiple($event)"
                      (success)="onSuccess($event)">
            </dropzone>
        </div>
        <br />
        <button (click)="uploadFiles()">Upload</button>

please help if anybody know how to fix it.

Upvotes: 0

Views: 4111

Answers (1)

Anna
Anna

Reputation: 186

Just googled it, and that's what I found: The directive itself is not the Dropzone instance, so for 4.x this.dropzone.dropzone.processQueue() or for 5.x this.dropzone.dropzone().processQueue().

Took here: https://github.com/zefoy/ngx-dropzone-wrapper/issues/60

By the way, I'm not sure, but this seems incorrect @ViewChild('drpzone') drpzone: DropzoneConfigInterface;

shouldn't it be @ViewChild('drpzone') drpzone: DropzoneDirective; ?

Upvotes: 1

Related Questions