CODEWITHSUNDEEP
angulardropzone.js
tigie11
tigie11

Reputation: 33

How to add option "params" in dropzone.js Angular4

I'm making an application in angular 4. I'm using dropzone.js to transfer files to back. To use Dropzone.js in angular 4, I'm using ngx-dropzone-wrapper.

I want to pass a new parameters when a file is sent (with the 'params' options). The parameters is a function that return a string, and the result change on a user click. It's actually a Singleton and the first time it's created is in the ngOnInit() function in the app.component.ts file.

My app.module.ts look like this (where the dropzone.js module is added to the project):

import { DropzoneModule, DropzoneConfigInterface } from 'ngx-dropzone-wrapper';
const DROPZONE_CONFIG: DropzoneConfigInterface = {
    url: 'http://localhost:81/api/createFiles',
    maxFilesize: 50,
    acceptedFiles: 'image/*',
    params: { 'whereToCreate': **the function goes here** }
};

@NgModule({
...
imports: [
    ...
    DropzoneModule.forRoot(DROPZONE_CONFIG)

My HTML using the ngx-dropzone-wrapper (it's exactly like the example in the github of ngx-dropzone-wrapper):

<dropzone [config]="config" [message]="'Click or drag images here to upload'" (error)="onUploadError($event)" (success)="onUploadSuccess($event)"></dropzone>

Upvotes: 0

Views: 3233

Answers (2)

yggarcia
yggarcia

Reputation: 21

Try this: When the file is sent it will trigger and many event among them sending event in this event you receive as parameters File , xhr, formData in the formData you can .append(key, value). Then it will send along with each file the new params. Your html:

        <div class="text-center well">
          <dropzone [config]="dropzoneConfigI"
                [message]="'Click or drag images here to upload'"
                (error)="onError($event)"
                (sending)="onSending($event)"
                (sendingmultiple)="onSendingmultiple($event)"
                (success)="onSuccess($event)"
                (addedfile)="onAddedFile($event)"
           >
           </dropzone>
    </div>

your controller:

  onSending(data): void {
    // data [ File , xhr, formData]
    const file = data[0];
    const formData = data[2];
    formData.append('order', someIteratorValue);
  }

Hope it helps.

Upvotes: 2

tigie11
tigie11

Reputation: 33

I didn't know, but Dropzone.js send all the inputs in the form.

So, i transform the div into a form and add a hidden input:

<form [dropzone]="config" (error)="onUploadError($event)" (success)="onUploadSuccess($event)">
    <input type="hidden" name="whereToCreate" value="{{ this.currentFolder.get() }}">
</form>

Upvotes: 0

Related Questions