Angular2 ng2-file-upload single upload and drop zone both together?

Question

I'm using ng2-file-upload module for Angular2 and I want to have a drag and drop area and at the same time the posibility to click in that area and select a single file.

In their examples it is separated and there is no example with both together. For example:

<div ng2FileDrop
     [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
     (fileOver)="fileOverBase($event)"
     [uploader]="uploader"
     class="well my-drop-zone">
     Base drop zone
</div>

Single
<input type="file" ng2FileSelect [uploader]="uploader" />

Thanks!

is it ng2FileDrop working? if it is working can u create plunker for this? — roshini
– roshini, Commented Jun 22, 2017 at 11:20

ismaestro · Accepted Answer · 2017-03-16 16:49:54Z

6

I found a solution :)

<div class="col-md-6 p_0"
   [ngClass]="{'file-over': hasBaseDropZoneOver}"
   ng2FileDrop [uploader]="uploader"
   (click)="fileInput.click()">

   Base drop zone
   <input type="file" #fileInput ng2FileSelect [uploader]="uploader" style="display: none"/>
</div>

answered Mar 16, 2017 at 16:49

ismaestro

8,3079 gold badges39 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

roshini Over a year ago

is it ng2FileDrop working? if it is working can u create plunker for this?

Francesco Over a year ago

However nothing happens if you drop the file, you just change the CSS class on file over...

Collectives™ on Stack Overflow

Angular2 ng2-file-upload single upload and drop zone both together?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related