7.15: Drag and Drop a File – p5.js Tutorial

This video looks at how you can create a “drag and drop” zone as a DOM element and use that file dragged and dropped (such as an image) in your code.

Next Video:

Support this channel on Patreon:


Send me your questions and coding challenges!:

Link to code on Github:


For More p5.js Videos:

Help us caption & translate this video!






15 responses to “7.15: Drag and Drop a File – p5.js Tutorial”

  1. I am fucking your waifu and there's nothing you can do about it Avatar

    Hey I was wondering if I could use the code for commercial purposes. I want to make a website, but I'm not sure if I want to use it for charity or to make money off of; however I'de like to have the option I also have no problem putting your youtube links in my html code if you just want credit for it. thanks.

  2. Zachary Siegel Avatar

    How could you do this with an audio file?

  3. copypastecopypaste Avatar

    But can I do this in processing?

  4. BainSonic Avatar

    How can the rainbow be transparent? It is a jpg

  5. David Castro Avatar

    why isnt the "select" working for me?

  6. Valentin Craciun Avatar

    how I can load pixels from the created photo; I mean can not use img.loadPixels(); to manipulate the pixels;

  7. Zane Dockery Avatar

    You're like the Bob Ross of programming, but on just a little bit of cocaine. Nonetheless, you have great videos!

  8. Andreea - Ioana Cristea Avatar

    from where is called the setup function?

  9. Right Brain Avatar

    yeah ! i like addClass more than only class 😛

  10. Verto Letnaya Avatar

    The reference kinda misleads in the syntax area but it actually clearly states in the description which is just above the syntax:
    "You can optionally pass two callbacks, the first one (required) is triggered for each file dropped when the file is loaded. The second (optional) is triggered just once when a file (or files) are dropped."
    so the first one is the main function that deals with file.. and the 2nd one is just for fun.. 🙂
    Question is how do you know which properties of the file we can access… and the syntax of calling those properties?

  11. Shawn Weiland Avatar

    Super helpful! Thanks so much!

  12. Setup Draw Avatar

    Hi there! I have replicated your example; everything works except the fact that I get a strange console message when dropping the file: " 18693: Uncaught TypeError: Cannot read property '0' of undefined (the same message is repeated several times) … ? Have no Idea what is it. Do you?

  13. Ryan Scharfer Avatar

    In the p5 reference, it states that the createImg function takes the src or path as an argument. In this video, we are using file.data as an argument, which looks nothing like a path I am familiar with. How does that work? Is file.data some sort of encoded URL?

  14. Ryan Scharfer Avatar

    Have you done your 'closure' video, yet? You said to remind you.. ; )

  15. Xeronimo74 Avatar

    neat possibilities there!

Leave a Reply

Your email address will not be published. Required fields are marked *