Get dropped file as input

Question

I handle the file entered in an input type "file" so:

<input id="upload_button" type="file"/>

And then:

var handleFileSelect = function(evt) {                                  

        var target = evt.dataTransfer || evt.target;
        var file = target && target.files && target.files[0];
        (...)
    };
    angular.element(document.querySelector('#upload_button')).on('change', handleFileSelect);`

As you can see document.querySelector('#upload_button').on('change', handleFileSelect);.

But I would like to do the same with a drag & drop div:

<div class="drop-zone" id="upload_drop" >
        <img src="../images/icon_cloud.png"/>
        <font class="receipt_upload_font"> Beleg per Drag & Drop hinzufügen</font>
        <font class="receipt_upload_oder_font"> oder unten "Beleg hinzufügen" klicken und Datei auswählen</font>
    </div>`

But I don't know how to do it. :( I can't handle the dropped file in the div as the input.

reduce your code to only what is required to understand your problem, there's way too much here, I don't want to read your entire method. Please do a search before posting a new question. Possible duplicate of [drag drop files into standard html file input](http://stackoverflow.com/questions/8006715/drag-drop-files-into-standard-html-file-input) — davidcondrey, Mar 08 '16 at 14:25
I think that's what you need : https://jqueryui.com/droppable/. You need the jqui API for that though — SamyQc, Mar 08 '16 at 14:25
@davidcondrey this [drag drop files into standard html file input](http://stackoverflow.com/questions/8006715/drag-drop-files-into-standard-html-file-input) doesn't work for me, 'cause there I shall have the input tag inside the div where I'll drop. => `
` but I need to use it so: `
` — Chuck Aguilar, Mar 08 '16 at 14:58

score 0 · Accepted Answer · answered Mar 14 '16 at 11:02

At the end I found a best way to do it.

While drop, I used instead:

angular.element(document.querySelector('#upload_button')).on('change', handleFileSelect);

this one:

<div class="drop-zone" id="upload_drop" >
    <img src="../images/icon_cloud.png"/>
    <font class="receipt_upload_font"> Beleg per Drag & Drop hinzufügen</font>
    <font class="receipt_upload_oder_font"> oder unten "Beleg hinzufügen" klicken und Datei auswählen</font>
</div>
<script>
 var dropZone = document.getElementById('upload_drop');

    // Get file data on drop
    dropZone.addEventListener('drop', function(e) {
        handleFileSelect(e);
    });
<script>

So it works when I drop something.

Get dropped file as input

1 Answers1