Disable droppable area #659

New Issue

2017-03-07T16:26:17Z

mohammed-sadik commented

2017-03-07 16:26:17 +00:00

(Migrated from github.com)

Hi All,

Is there any way to disable the droppable area? I am in situation under some circumstances I have to disable the drag and drop feature. There is a feature like "_preventAndStop" but this is a protected method. Wondering how to access this?

Regards,
Sadik

Hi All, Is there any way to disable the droppable area? I am in situation under some circumstances I have to disable the drag and drop feature. There is a feature like "`_preventAndStop`" but this is a protected method. Wondering how to access this? Regards, Sadik

👍 1

plima2050 commented

2017-03-07 20:48:32 +00:00

(Migrated from github.com)

shared your code please

mohammed-sadik commented

2017-03-09 08:34:05 +00:00

(Migrated from github.com)

<div class="document-items"
             ng2FileDrop
             [ngClass]="{'drag-disabled': hasBaseDropZoneOver}"
             (fileOver)="fileOverBase($event)"
             [uploader]="uploader"
             [disabled]="true" <!-- This kind of option I am looking for -->
><!-- Some Items --> </div>

Scenario: If the user is not authorized to drag and drop, but do not wants to hide the div

-sadik

``` <div class="document-items" ng2FileDrop [ngClass]="{'drag-disabled': hasBaseDropZoneOver}" (fileOver)="fileOverBase($event)" [uploader]="uploader" [disabled]="true"  > </div> ``` Scenario: If the user is not authorized to drag and drop, but do not wants to hide the div -sadik

DanielNetzer commented

2017-03-09 12:10:45 +00:00

(Migrated from github.com)

not aware of anything implemented in this module to achieve what you mentioned but you can style it with an invisible overlay to block the drop zone area.

mohammed-sadik commented

2017-03-09 13:13:58 +00:00

(Migrated from github.com)

If I put a invisible overlay on top of it, the user wouldn't be able to take any actions on the items already there within the div. :(

mohammed-sadik commented

2017-03-09 14:31:53 +00:00

(Migrated from github.com)

Work around, this might help someone

        if(uploadDisabled) {
           this.uploadOptions.queueLimit = 0;
       }

And a class in the html [ngClass]="{'disabled':uploadDisabled}"

-sadik

Work around, this might help someone ``` if(uploadDisabled) { this.uploadOptions.queueLimit = 0; } ``` And a class in the html `[ngClass]="{'disabled':uploadDisabled}"` -sadik

👍 1

ildarnm commented

2017-04-21 12:17:07 +00:00

(Migrated from github.com)

Same problem. Need dragable option.

nunos7 commented

2017-05-22 11:29:36 +00:00

(Migrated from github.com)

+1

KShewengger commented

2017-08-03 05:56:29 +00:00

(Migrated from github.com)

For a workaround, you can specifiy this command below, which doesn't accept any file types to be dragged in a box or to be selected via input and include them on the queue list, more like disabling the drag drop and selection of files.

this.uploader.setOptions({allowedMimeType: []});

For me, i used it like when it already starts uploading files, i do not allow any additional files to be included in queue unless the 1st batch is finished:

allowedMimeTypes: string[]; -> Specify the mime types you want to include e.g "image/jpg" etc. . .

constructor() {}

isEnableDragDrop(): void {
  if (this.uploader.isUploading) this.uploader.setOptions({allowedMimeType: []});
  else this.uploader.setOptions({allowedMimeType: this.allowedMimeTypes});
}

For a workaround, you can specifiy this command below, which doesn't accept any file types to be dragged in a box or to be selected via input and include them on the queue list, more like disabling the drag drop and selection of files. `this.uploader.setOptions({allowedMimeType: []});` For me, i used it like when it already starts uploading files, i do not allow any additional files to be included in queue unless the 1st batch is finished: ``` allowedMimeTypes: string[]; -> Specify the mime types you want to include e.g "image/jpg" etc. . . constructor() {} isEnableDragDrop(): void { if (this.uploader.isUploading) this.uploader.setOptions({allowedMimeType: []}); else this.uploader.setOptions({allowedMimeType: this.allowedMimeTypes}); } ```

sbervinov commented

2019-03-27 23:37:05 +00:00

(Migrated from github.com)

I have found a workaround:

fileUploader: FileUploader;

ngOnInit(): void {
    ...
    this.initFileUploader();
    ...
}

initFileUploader(): void {
    this.fileUploader = ...;

    const originalAddToQueueFn = this.fileUploader.addToQueue;
    this.fileUploader.addToQueue = (files: File[], options?: FileUploaderOptions, filters?: FilterFunction[] | string) => {
        if (!this.isDragAndDropDisabled()) {
            originalAddToQueueFn.call(this.fileUploader, files, options, filters);
        }
    };

    ...
}

isDragAndDropDisabled(): boolean {
    return ...;
}

I have found a workaround: fileUploader: FileUploader; ngOnInit(): void { ... this.initFileUploader(); ... } initFileUploader(): void { this.fileUploader = ...; const originalAddToQueueFn = this.fileUploader.addToQueue; this.fileUploader.addToQueue = (files: File[], options?: FileUploaderOptions, filters?: FilterFunction[] | string) => { if (!this.isDragAndDropDisabled()) { originalAddToQueueFn.call(this.fileUploader, files, options, filters); } }; ... } isDragAndDropDisabled(): boolean { return ...; }

👍 1

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#659