# Drop() function working randomly

**URL:** <https://discourse.processing.org/t/drop-function-working-randomly/1244>\
**Category:** Coding Questions\
**Created:** [June 25, 2018, 1:11pm UTC](https://discourse.processing.org/t/drop-function-working-randomly/1244 "2018-06-25T13:11:31Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![colin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/colin/32/230_2.png) [@colin](https://discourse.processing.org/u/colin)\
**Post date:** [June 25, 2018, 1:11pm UTC](https://discourse.processing.org/t/drop-function-working-randomly/1244/1 "2018-06-25T13:11:31Z")

</div>

Hi. I’m definitely having trouble to make my drag and drop function working. The sketch below grabs the image from the user but don’t manage to save it as a p5 image every time. I’m around 33% successful drops.

Any idea for fixing this ? Or where the problem could be from ?

You can try my sketch [here](http://alpha.editor.p5js.org/colin.thil@gmail.com/sketches/HkSovDAb7)

```auto
var userFile;
var c = 0;
var d = 0;

function setup() {  
  
  canvas = createCanvas(windowWidth, windowHeight);

}

function gotFile(file) {
  
  var img;
  var gr;
  img = createImg(file.data).hide();
  
  if(img.width != 0){
    userFile = img;
    d++;
  }
  
  else print("missed");
  
  c++;
  
  print(int(d/c*100)+"%");
  
}

function draw() {
  
  background(255);
  canvas.drop(gotFile);
  
  if(userFile) image(userFile,0,0,width,height);
  
}

```

---

<div class="post-metadata">

**Author:** ![dan850](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dan850](https://discourse.processing.org/u/dan850)\
**Post date:** [June 25, 2018, 11:27pm UTC](https://discourse.processing.org/t/drop-function-working-randomly/1244/2 "2018-06-25T23:27:22Z")

</div>

Can you post the image files needed for the sketch please. I just get a blank canvas when i run the program.

---

<div class="post-metadata">

**Author:** ![codingking03](https://avatars.discourse-cdn.com/v4/letter/c/3ec8ea/32.png) [@codingking03](https://discourse.processing.org/u/codingking03)\
**Post date:** [June 26, 2018, 3:14am UTC](https://discourse.processing.org/t/drop-function-working-randomly/1244/3 "2018-06-26T03:14:37Z")

</div>

I think you are supposed to drag an image on

---

<div class="post-metadata">

**Author:** ![codingking03](https://avatars.discourse-cdn.com/v4/letter/c/3ec8ea/32.png) [@codingking03](https://discourse.processing.org/u/codingking03)\
**Post date:** [June 26, 2018, 3:17am UTC](https://discourse.processing.org/t/drop-function-working-randomly/1244/4 "2018-06-26T03:17:38Z")

</div>

this may help:

[![](https://img.youtube.com/vi/o4UmGrPst_c/hqdefault.jpg "8.15: Drag and Drop a File - p5.js Tutorial") ](https://www.youtube.com/watch?v=o4UmGrPst_c)

---

<div class="post-metadata">

**Author:** ![dan850](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dan850](https://discourse.processing.org/u/dan850)\
**Post date:** [June 26, 2018, 3:27am UTC](https://discourse.processing.org/t/drop-function-working-randomly/1244/5 "2018-06-26T03:27:34Z")

</div>

@codingking03 thanks for the tip

> [@colin](#):
>
> img = createImg(file.data).hide();

@colin my guess is that you need the `show()` method instead of `hide()` ?

---

<div class="post-metadata">

**Author:** ![colin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/colin/32/230_2.png) [@colin](https://discourse.processing.org/u/colin)\
**Post date:** [June 26, 2018, 9:06am UTC](https://discourse.processing.org/t/drop-function-working-randomly/1244/6 "2018-06-26T09:06:54Z")

</div>

Hi @dan850 , you can drag any image on the sketch to try it  
The hide function is called to prevent the image to be displayed as a new html element, you can try it to see by yourself (I replicate the method from the reference)  
My goal is to store the image and then display it from the sketch itself.

---

<div class="post-metadata">

**Author:** ![colin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/colin/32/230_2.png) [@colin](https://discourse.processing.org/u/colin)\
**Post date:** [June 26, 2018, 9:08am UTC](https://discourse.processing.org/t/drop-function-working-randomly/1244/7 "2018-06-26T09:08:42Z")

</div>

Hi @codingking03, I’ve been there, and replicate his method. Nice tutorial btw 😌