angular-file-upload - how to make drop zone clickable?

Question

Using nv-file-upload (https://github.com/nervgh/angular-file-upload) how can I make the drop zone act also as a clickable element to select files? Adding {{nv-file-select}} does not seem to work.

Jeff Ward · Accepted Answer · 2016-03-09 16:38:46Z

4

The answer is that YOU CANT, there is no way to do this inside that plugin but i use a simple solution for this kind of problems. Add a ng-click inside your dragNdrop tag and call your function:

<div nv-file-drop="" uploader="upload" ng-click="launchFilePicker()">
 <div class="drop-box" ng-show="upload.isHTML5" uploader="upload" nv-file-over="" over-class="dragover" filter="image/*,application/pdf">
   Drag a file here.
  </div>
</div>
<div ng-hide="upload.isHTML5"> <input id="fileDialog" type="file" nv-file-select uploader="upload"/><br/></div>

And inside your controller you do this:

$scope.launchFilePicker = function () {
  //$('#fileDialog').click(); //not angular way
  angular.element('#fileDialog').trigger('click'); //angular way
};

I hope this help.

edited Mar 9, 2016 at 16:38

Jeff Ward

20.6k8 gold badges56 silver badges60 bronze badges

answered Aug 12, 2015 at 18:33

Aosi

1113 silver badges7 bronze badges

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

Collectives™ on Stack Overflow

angular-file-upload - how to make drop zone clickable?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related