Drag and drop local files into p5 skecthes


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() {
  text("drag your file here",width/2, height/2);

  //if (fileIsDroped) file=imageDroped; 

1 Like



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 ?

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 ?

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

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

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:

1 Like

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