Feature/drop target as element

[Fuzzyma]

This feature extends the events afteraddingfile, whenaddingfilefailed and afteraddingall with the element on which the file was dropped provided as third argument to the listener.

Furthermore it adds a check whether the drag is a filedrag. If not the fileuploader wont do anything

[nervgh]

Access to html elements in controller is bad practice.
You can use custom options instead.

Options that are described here will be interpreted as setting. Another options you can use like this

<input type="file" ng-file-select="{ id: 'your_id', ... }" />
or
<div ng-file-drop="{ id: 'your_id', ... }"></div>

uploader.bind('afteraddingfile', function(event, item) {
    // item.id
});

[Fuzzyma]

So I can do something like this:
<li ng-file-drop="{el:this}">... <li>
and use it with
uploader.bind('afteraddingfile', function(event, item) { // item.el });

[nervgh]

So I can do something like this:

No, because

Access to html elements in controller is bad practice.

Why do you need html element in angular controller?

[Fuzzyma]

I dont need the element. I need access to the $scope of the element. Accessing the scope of an element in the controller is no bad practice at all (imo^^).

Dropping something in any system implies the knowledge about WHAT was dropped and WHERE was it droped. I can imagine lots of applications where the "WHERE" is critical (starting with filesystems also on websites). When you drop something you often need the location where it was dropped. In HTML it means you need the element. There is no other choice to access the $scope of the element but with the element itself. And thats why I need the element - yes - in my controller

PS: As you may have already realized: I am coding a webapp with a fileTree. Uploading files via drag and drop into a specific directory would be a nice feature. But its only possible when you have access to the scope the file was dropped on

[nervgh]

for example

.controller('DataController', function($scope) {
    var model = $scope.model = {
        data: [3, 4]
    };
})


.controller('UploadController', function($scope, $fileUploader) {
    var uploader = $scope.uploader = $fileUploader.create({
        scope: $scope
    });

    uploader.bind('afteraddingfile', function(event, item) {
        console.info('After adding a file', item, item.id);
    });
})

<div ng-controller="UploadController">
    <h3>Test</h3>
    <ul>
        <li ng-repeat="item in uploader.queue">Id: {{ item.id }}</li>
    </ul>
    <div ng-controller="DataController">
        Id: 3 <input type="file" ng-file-select="{id: model.data[0]}"><br/>
        Id: 4 <input type="file" ng-file-select="{id: model.data[1]}">
    </div>
</div>

[Fuzzyma]

Well - we are talking about dropping files and your examples are always about selecting files.

Imagine you have one element with ng-drop
<div ng-drop>Drop here</span>
You know on which element the file was dropped - there is only one.

Now imagine multiple fields
<div ng-drop>Drop here</div><div ng-drop>Or here</div>
Well - answer is simple. You give them the id and you get them again:
<div id="one" ng-drop="{id:'one'}">Drop here</div><div id="two" ng-drop="{id:'two'}">Or here</div>

Done with that we now do it a bit more tricky with ng-repeat:

var dropZones = [
    {id:'one', text:'Drop here'},
    {id:'two', text:'Or here'},
    {id:'three', text:'Or there'}
];

<ul>
 <li ng-repeat="zone in dropZones" id="{zone.id}" ng-drop="{id:zone.id}">{ zone.text }</li>
</ul>

Still works - we have the ids.

But now we have a server generated recursive list like:

var root = {
    name:'/',
    nodes:[
        {
            name:'file1',
            nodes:[]
        },{
            name:'file2',
            nodes:[]
        },{
            name:'dir1',
            nodes:[
                {name:'file3',nodes:[]}
            ]
        }
    }
}

Imagine a List recursively created with this JSON

Well - we could use the names as id but there could be nodes with the same name.
There is no possibility to get the Element on which the file was dropped.
I would upload my project but since everyone can manipulate the filesystem then (atleast the files in one folder) I have my safety concerns.
I relate here to the issue I created to this PR where you see an example of a list created like this: #102

Since ng-repeat creates a new scope every time and ng-incude does so too (we need that cause of the recursive stuff), we also cant use the controller-scope.

Note that all my issues are real problems and not only "could happen"-Problems. So other user may have the same problems

[Fuzzyma]

Well - I didnt know why you wrote this:

No, because

Cause it's working. This leads the discussion to absurdity.
Btw: When you are doing this:
<li ng-file-drop="{el:this}">... <li>
You dont get the element but the scope of the element (which is all I want aaaaaaand NO HTML in controller - jihaaa ;) ).

Thats why this PR can be refused cause this problem is solved.

PS: Is it possible to only pull specific commits from a PR? Since my last 2 requests are more related to the emptyFiles issue (#105)
Should I create a new PullRequest for this?

[nervgh]

I dont need the element

You contradict yourself

I need access to the $scope of the element

I already gave you an example

You can fork this project and modify it.
You can write your own uploader.
You can find another uploader.

[Fuzzyma]

Are you kinda angry or annoyed about me? Sorry - I didnt want to attack you. I appreciate your work and I love this uploader. This is just a discussion.

Your example wasnt solving the problem. At least I thought that. Just entering this instead of mode.data was all I wanted :D.

I dont know if you read the whole text. I will do another PR related to another problem (which is no rubbish this time - for sure)