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.

Answer 1

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.