Drag & Drop File from Desktop

Trying to handle drop event for enyo component (drag&drop image file from desktop) but it seems not to work. When drag-dropping image within app the event is firing ok but not when from desktop. How to go about it...?

Comments

  • edited October 2013
    To enable the drag and drop from desktop, you need to use an input file. There is no native input file component in enyo, but you can create your own. A file is droppable only on the input file component.

    If you want to custom it, you need to use css rules such as opacity:0 and then customizing the layer just under it.

    I don't think it will work with every browsers, but it does with Google Chrome.
  • I wonder why that is, quick glance at enyo.Input does not give any pointers...

    And this demo
    http://css-tricks.com/examples/DragAvatar/

    Makes me think it should be straight forward. Is enyo swallowing this event somehow, how to change it?
  • You can get your own pointer, and handle native html event this way :

    {kind:'enyo.Input', name:'fileInput' ... }
    create:function(){
      this.inherited(arguments);
      var myInput = document.getElementById(this.$.fileInput.id);
      myInput.addEventListener("...", enyo.bind(this, "fileInputHandler"));
    },
    fileInputHandler:function(inEvent){
      ...
    }
    
    Perhaps, there is a better way to do this.
  • that's what I was trying to do, somehow it doesn't work for me in case of 'drop' event.

    while doing:
    enyo.dispatcher.listen(window, "dragover", enyo.bind(this, function(...)));
    enyo.dispatcher.listen(window, "dragleave", enyo.bind(this, function(...)));
    enyo.dispatcher.listen(window, "drop", function(...));
    
    ...the first two work ok, the last one is somehow ignored.
  • When you're dropping a file on a fileinput, there is no drop event triggered, but you can get the "onchange" event of the fileinput.
Sign In or Register to comment.