How to execute myDropzone.processQueue() function

[kevinklinegargar]

I set the option autoProcessQueue = false so that I can do some manipulation to that image before uploading to the server. But I'm having trouble how to resume the upload process, I cannot find how to execute the myDropzone.processQueue() .

I'm using the directive method. Can anyone help me? Thanks in advance.

[sconix]

With 4.x dropzone is exposed as dropzone under the directive, with 5.x you can call dropzone() from directive reference to get the Dropzone instance.

[kevinklinegargar]

@sconix I'm using angular 4 here's a sample of my codes.

this.drpzone.processQueue(); ERROR -> Property 'processQueue' does not exist on type 'DropzoneDirective'.

I'm not using the directive correctly in the component?

package.json

 "dependencies": {
    "@angular/animations": "^4.4.6",
    "@angular/cli": "^1.2.4",
    "@angular/common": "^4.4.6",
    "@angular/compiler": "^4.3.1",
    "@angular/compiler-cli": "^4.3.1",
    "@angular/core": "^4.3.1",
    "@angular/forms": "^4.4.6",
    "@angular/http": "^4.3.1",
    "@angular/platform-browser": "^4.3.1",
    "@angular/platform-browser-dynamic": "^4.3.1",
    "@angular/router": "^4.3.1",
    "@ngrx/effects": "^4.0.5",
    "@ngrx/store": "^4.1.0",
    "@ngrx/store-devtools": "^4.0.0",
    "@types/body-parser": "^1.16.3",
    "@types/compression": "^0.0.33",
    "@types/cors": "^2.8.1",
    "@types/express": "^4.0.35",
    "@types/jasmine": "2.5.38",
    "@types/jsonwebtoken": "^7.2.0",
    "@types/node": "~6.0.60",
    "@types/parse": "^2.4.0",
    "@types/uuid": "^2.0.29",
    "@webcomponents/custom-elements": "^1.0.0",
    "aws-sdk": "^2.141.0",
    "body-parser": "~1.17.1",
    "clarity-angular": "^0.10.9",
    "clarity-icons": "^0.10.9",
    "clarity-ui": "^0.10.9",
    "compression": "^1.6.2",
    "cookie-parser": "^1.3.5",
    "cookie-session": "^2.0.0-beta.3",
    "core-js": "^2.4.1",
    "cryptr": "^2.0.0",
    "express": "^4.15.2",
    "express-jwt": "^5.1.0",
    "instagram-node": "^0.5.8",
    "jsonwebtoken": "^7.3.0",
    "multer": "^1.3.0",
    "multer-s3": "^2.7.0",
    "ng2-img-cropper": "^0.9.0",
    "ngrx-core": "^1.2.2",
    "ngrx-store": "^2.3.1",
    "ngrx-store-freeze": "^0.1.9",
    "ngx-cookie": "^1.0.0",
    "ngx-dropzone-wrapper": "^4.6.6",
    "nodemailer": "^4.2.0",
    "normalize.css": "^5.0.0",
    "parse": "^1.10.0",
    "parse-cloud-express": "^1.2.0",
    "parse-server": "^2.6.3",
    "path": "^0.12.7",
    "rxjs": "^5.4.2",
    "ts-helpers": "^1.1.2",
    "ts-node": "~3.3.0",
    "tslint": "^4.5.1",
    "typescript": "^2.3.4",
    "uuid": "^3.0.1",
    "zone.js": "^0.8.14"
  },

dashboard.component.ts

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute,Router } from '@angular/router';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { CookieService } from 'ngx-cookie';
import { config } from './../config';
import { DropzoneModule ,DropzoneComponent , DropzoneDirective, DropzoneConfigInterface } from 'ngx-dropzone-wrapper';

// import { DropzoneEvents } from 'ngx-dropzone-wrapper/dist/lib/dropzone.interfaces';
@Component({
    selector: 'dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit{

    @ViewChild('drpzone') drpzone: DropzoneDirective;

    public config: DropzoneConfigInterface = {
        clickable: true,
        maxFiles: 1,
        autoReset: 1000,
        errorReset: null,
        cancelReset: null,
        autoProcessQueue:false,
        previewTemplate:` <div id="sauce-upload-preview" ></div>`

    };

    constructor(
        private http: Http,
        private router:Router,
        private _cookieService:CookieService) {

    }
    ngOnInit(){
        this.drpzone.processQueue();
    }

}

dashboard.component.html

<div #drpzone class="sauce-upload" [dropzone]="config"></div>

[sconix]

The directive itself is not the Dropzone instance, so for 4.x this.dropzone.dropzone.processQueue() or for 5.x this.dropzone.dropzone().processQueue().

[kevinklinegargar]

Thank you guys. It's working. But I'm wondering why it needs to put some delay before executing the processQueue() inside the addedFile() event function in order to continue the uploading.

onAddedFile(event){
    console.log("Accepted");
    console.log(event);
    setTimeout(() => { this.drpzone.dropzone.processQueue();}, 1);

}

[sconix]

Thats a question for Dropzone. At least I don't know the inner workings of Dropzone. Anyway good thing that you got it working.

[salesh]

this.drpzone.dropzone is not a function

Is there something that changed ?