# dragOver and dragLeave do not work

**URL:** <https://discourse.processing.org/t/dragover-and-dragleave-do-not-work/4208>\
**Category:** Coding Questions\
**Created:** [October 7, 2018, 3:53am UTC](https://discourse.processing.org/t/dragover-and-dragleave-do-not-work/4208 "2018-10-07T03:53:35Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jituibuchipi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jituibuchipi/32/1882_2.png) [@jituibuchipi](https://discourse.processing.org/u/jituibuchipi)\
**Post date:** [October 7, 2018, 3:53am UTC](https://discourse.processing.org/t/dragover-and-dragleave-do-not-work/4208/1 "2018-10-07T03:53:35Z")

</div>

I wanna write a board which hilight when users drag files upon it,  
When i run the code the drop() function did work, However the dragOver() and dragLeave() function just do not work,anything wrong with my code? I edit and run this in the p5.js web editor. just feel confused.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b28b8d81bf1c94e13e020f9c8537e5dc601154eb.png)

```auto
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <style>
      
      #drag_zone{
      font-size: 30pt;
      border-style: dashed;
      padding: 24px;
      width:50%
      }
    </style>
    <p id ="drag_zone">Drag your picture here </p>
    <script src="sketch.js"></script>
  </body>
</html>

```

```auto
var drag_zone;
function setup() {
  noCanvas();
  drag_zone = select('#drag_zone');
  drag_zone.dragOver(hilight);
  drag_zone.dragLeave(unhilight);
  drag_zone.drop(getpic);
}

function hilight() {
  this.style('background-color', 'rgb(255,255,0)');
}

function unhilight() {
  this.style('background-color', 'rgb(0,0,0,0)');
}

function getpic(file) {
  img = createImg(file.data);
  img.size(200, 200);
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 7, 2018, 4:48am UTC](https://discourse.processing.org/t/dragover-and-dragleave-do-not-work/4208/2 "2018-10-07T04:48:42Z")

</div>

[p5js.ProcessingTogether.com/sp/pad/export/ro.CYTkHWj9smgw8Q](http://p5js.ProcessingTogether.com/sp/pad/export/ro.CYTkHWj9smgw8Q)

---

<div class="post-metadata">

**Author:** ![ali](https://avatars.discourse-cdn.com/v4/letter/a/8c91f0/32.png) [@ali](https://discourse.processing.org/u/ali)\
**Post date:** [May 16, 2021, 7:40pm UTC](https://discourse.processing.org/t/dragover-and-dragleave-do-not-work/4208/3 "2021-05-16T19:40:26Z")

</div>

Hi, I’m really new to P5js, I was watching a tutorial for this same topic and is working perfectly, but I would like to do the same with audio, but it seams like the “.data” method doesn’t work with audio files, I know there is a SounFile object but I cannot figure out how to implemented with this example.

Hope anyone could help me.

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [May 16, 2021, 7:49pm UTC](https://discourse.processing.org/t/dragover-and-dragleave-do-not-work/4208/4 "2021-05-16T19:49:58Z")

</div>

I can’t figure out what exactly you want to do now but I was just trying this with native Web Audio and this solution worked for me:

> <https://stackoverflow.com/questions/17944496/html5-audio-player-drag-and-drop/31114936#31114936>

If p5.Sound doesn’t allow reading `data` directly you may need to adapt the code above and wrap it for p5.Sound.

Also meanwhile if you can post a code that you are working on, it may help others to answer 🙂

---

<div class="post-metadata">

**Author:** ![ali](https://avatars.discourse-cdn.com/v4/letter/a/8c91f0/32.png) [@ali](https://discourse.processing.org/u/ali)\
**Post date:** [May 16, 2021, 8:23pm UTC](https://discourse.processing.org/t/dragover-and-dragleave-do-not-work/4208/5 "2021-05-16T20:23:12Z")

</div>

Hi micuat  
Thank you so much for your reply, what I want to achieve is to be able to have a drag and drop area for the user to upload audio files, eventually I assume that I will need to save those files on a server (I think I can do it with the getBlob method), but first things first. My code right now is pretty simple, it’s working with images, but my logic on how to combine it with “loadSound” method is not.

```auto
let dropzone; 
let img;
function setup() {
  dropzone = select('#dropzone');
  dropzone.dragOver(highlight);
  dropzone.dragLeave(unhighlight);
  dropzone.drop(gotFile, unhighlight);
}

function gotFile(file) {
  createP(file.name + " " + file.size);
  //createP(file.type);
  //createP(file.subtype);
  //(createP(file.size);
  //img = createImg(file.data);
  //save(img, 'myImage.png');
  //img.size(100, 100);
  img = loadSound(file);
}

function highlight() {
  dropzone.style('background-color', '#ccc');

function unhighlight() {
  dropzone.style('background-color', '#fff');
}

```

I’ll start watching the solution with native web audio that you placed.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [May 17, 2021, 8:37am UTC](https://discourse.processing.org/t/dragover-and-dragleave-do-not-work/4208/6 "2021-05-17T08:37:44Z")

</div>

actually without hacking into the native api `loadSound` can handle `file.data`:

[https://editor.p5js.org/micuat/sketches/etbE7PmHf](https://editor.p5js.org/micuat/sketches/etbE7PmHf)

---

<div class="post-metadata">

**Author:** ![ali](https://avatars.discourse-cdn.com/v4/letter/a/8c91f0/32.png) [@ali](https://discourse.processing.org/u/ali)\
**Post date:** [May 17, 2021, 5:24pm UTC](https://discourse.processing.org/t/dragover-and-dragleave-do-not-work/4208/7 "2021-05-17T17:24:12Z")

</div>

Ei, @micuat thank you so much!! This is exactly what I was looking for, I already was working with the example that you send before and trying to figure out how to use it, but I think this one already helps me a lot.  
I don’t want to keep bothering you, but I don’t compleatly understand how you get loadSound to start working with file.data; do you mind telling me where I can found more resources and information about that.  
Again thank you much!

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [May 18, 2021, 12:18pm UTC](https://discourse.processing.org/t/dragover-and-dragleave-do-not-work/4208/8 "2021-05-18T12:18:41Z")

</div>

I think you had to `start` the playback - but unlike `preload` you have to use callback in this case…

For the question “where to find resource” it’s hard to answer because it was a bit of p5.js / javascript knowledge and some guessing work… I think p5.js reference is always a good place to start with, sometimes you need to look into the source code but I know this is intimidating, and you can always ask here when you think what you’re trying is beyond the “standard” p5.js 🙂