Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS ng-file-upload use window as droparea

Is it possible to use the whole window as droparea?

Sure, I can append ngf-drop attributes to body, but then some other HTML elements lay over and I can't drop my files there… Otherwise I can not use a DIV an append those attributes an lay it over all other elements, because nothing else is clickable.

Or how can I achieve that behaviour with vanilla js / css?

like image 899
YeppThat'sMe Avatar asked Mar 16 '23 02:03

YeppThat'sMe


1 Answers

If you add it to the body or a div that contains all the elements it should work, make sure the body container div is full size and include all the element. The dragover and drop event would still be called on the body or container div.

Sample: http://jsfiddle.net/w812qp1s/

<body ng-app="fileUpload" ng-controller="MyCtrl">
    <div style="width:100%;height:100%" ngf-drop ngf-select ng-model="files" class="drop-box" ngf-drag-over-class="dragover" ngf-multiple="true" ngf-allow-dir="true"><div>Drop File:</div>
        <div>No Drop File Div</div>
        <ul>
            <li ng-repeat="f in files" style="font:smaller">{{f.name}}</li>
        </ul>Upload Log: <pre>{{log}}</pre>

    </div>
</body>
like image 66
danial Avatar answered Mar 23 '23 21:03

danial