Drag and drop local files into p5 skecthes

p5.js Coding Questions
1

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

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; 

}
1 Like
2

http://p5js.ProcessingTogether.com/sp/pad/export/ro.CYTkHWj9smgw8Q

1 Like
3

:ok_hand::ok_hand::ok_hand:

4

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

5
1 Like
6

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 ?

7

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

1 Like
8

:confused: 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

9

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

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. :sunglasses:

2 Likes
10

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