By utilizing filepicker.makeDropPane() within a directive, any div with an ng-model can be transformed into a drop pane that saves the resulting InkBlob into the ngModel.
angular.module("app", []).directive("dropzone", function () {
return {
require: "ngModel",
link: function (scope, element, attrs, ngModel) {
filepicker.makeDropPane(angular.element(element)[0], {
dragEnter: function () {
console.log("Entered dropzone");
},
onSuccess: function (InkBlobs) {
ngModel.$setViewValue({
key: InkBlobs[0].key,
url: InkBlobs[0].url
}
}
});
}
}
});
The initial drag and drop upload will function properly. However, after a successful upload is made, subsequent drag and drop attempts will not trigger any action at all.
The dragEnter log message ceases to be displayed, which is unexpected. Normally, I would anticipate a disabled drop pane to behave like the rest of the browser window, where dragging a file onto it would simply open that file in the current tab. Nevertheless, when dragging a file onto the element following a previous successful upload, nothing happens – neither the dragEnter, dragLeave, onStart, onSuccess, nor
onError</code functions are executed; yet, the browser also does not open the file. The file only opens if dragged elsewhere outside the given element.</p>
<p>I suspected that angular might be interfering due to the directive templating, thereby disrupting the drop pane setup. Therefore, in an attempt to resolve this issue, I tried recompiling the directive in <code>onSuccess$compile(element)(scope). Unfortunately, this did not yield any impact.
What could be causing this behavior? It would make more sense if there was some form of feedback, but none of the callback functions provided are triggered once a successful upload has been completed.