# Drag and drop local files into p5 skecthes

**URL:** <https://discourse.processing.org/t/drag-and-drop-local-files-into-p5-skecthes/1144>\
**Category:** Coding Questions\
**Created:** [June 21, 2018, 9:07am UTC](https://discourse.processing.org/t/drag-and-drop-local-files-into-p5-skecthes/1144 "2018-06-21T09:07:58Z")\
**Posts on this page:** 10\
**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 21, 2018, 9:07am UTC](https://discourse.processing.org/t/drag-and-drop-local-files-into-p5-skecthes/1144/1 "2018-06-21T09:07:58Z")

</div>

Hi,

I have a quick question. I would allow my sketch’s users to drag and drop an image file into the program window, and then use it. I can’t find any function for that in p5.js. What would be the easiest way to do that in your opinion ?

Thanks for you help !

I made a quick example below

```auto
var file;

function draw() {
  if (file==null) dropScreen();
  else image(file, 0, 0, width, height);
}

function dropScreen() {
  textAlign(CENTER,CENTER);
  text("drag your file here",width/2, height/2);

  //if (fileIsDroped) file=imageDroped; 

}

```

---

<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:** [June 21, 2018, 9:24am UTC](https://discourse.processing.org/t/drag-and-drop-local-files-into-p5-skecthes/1144/2 "2018-06-21T09:24:16Z")

</div>

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

---

<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 21, 2018, 9:35am UTC](https://discourse.processing.org/t/drag-and-drop-local-files-into-p5-skecthes/1144/3 "2018-06-21T09:35:52Z")

</div>

👌👌👌

---

<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 21, 2018, 10:09am UTC](https://discourse.processing.org/t/drag-and-drop-local-files-into-p5-skecthes/1144/4 "2018-06-21T10:09:39Z")

</div>

Thank you for your help @GoToLoop. That was exactly what I was looking for.  
But sadly I am unable to make your sketch work on the p5 editor. Am I missing something ?  
[http://alpha.editor.p5js.org/colin.thil@gmail.com/sketches/HylIuxtbm](http://alpha.editor.p5js.org/colin.thil@gmail.com/sketches/HylIuxtbm)

---

<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:** [June 21, 2018, 11:17am UTC](https://discourse.processing.org/t/drag-and-drop-local-files-into-p5-skecthes/1144/5 "2018-06-21T11:17:47Z")

</div>

> [@How i extends class in p5.js?](https://discourse.processing.org/t/how-i-extends-class-in-p5-js/894/11):
>
> AFAIK, PDE’s p5js Mode doesn’t allow the instance mode approach I guess. grimacing The easiest way to run my demo sketches is by having any Firefox-based browser installed in your OS. star_struck I recommend Firefox Developer Edition, Waterfox & Palemoon: sunglasses Create some folder and then place both files “index.html” & “sketch.js” there. Finally open any Firefox-based browser and drag & drop the “index.html” file there. It should be run alright now! cowboy_hat_faceP.S.: …

---

<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 21, 2018, 11:32am UTC](https://discourse.processing.org/t/drag-and-drop-local-files-into-p5-skecthes/1144/6 "2018-06-21T11:32:19Z")

</div>

Thank you for your response ! I’m actually using Waterfox, but for this project I want my sketch to run on the p5 online editor, (it will be for a creative workshop with kids).  
Is there a way to make this kind of function works there ?

---

<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:** [June 21, 2018, 11:43am UTC](https://discourse.processing.org/t/drag-and-drop-local-files-into-p5-skecthes/1144/7 "2018-06-21T11:43:47Z")

</div>

I’ve copied & pasted my online sketch to the p5js online editor and it simply worked w/o any modifications: 🤩  
[http://Apha.Editor.p5js.org/](http://Apha.Editor.p5js.org/)

---

<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 21, 2018, 11:57am UTC](https://discourse.processing.org/t/drag-and-drop-local-files-into-p5-skecthes/1144/8 "2018-06-21T11:57:38Z")

</div>

😕 I did the same  
Can you share your sketch ? The link you paste don’t work.  
Is my copy/paste sketch working on your browser ?  
[http://alpha.editor.p5js.org/colin.thil@gmail.com/sketches/HylIuxtbm](http://alpha.editor.p5js.org/colin.thil@gmail.com/sketches/HylIuxtbm)

---

<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:** [June 21, 2018, 6:41pm UTC](https://discourse.processing.org/t/drag-and-drop-local-files-into-p5-skecthes/1144/9 "2018-06-21T18:41:54Z")

</div>

> [@colin](#):
>
> Is my copy/paste sketch working on your browser?

Yup, perfectly! I can drop image files into it and they show up there! 🤑

Both in 32-bit SlimJet (based on Chromium 64.0.3282.119) & 64-bit Waterfox (based on Firefox 56.2.1), under my AMD Win 8.1 laptop. 🕶

---

<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 22, 2018, 8:48am UTC](https://discourse.processing.org/t/drag-and-drop-local-files-into-p5-skecthes/1144/10 "2018-06-22T08:48:34Z")

</div>

I’m really confused. The sketch works when I’m not logged, but when I log in, it isn’t working anymore 😵