How to create p5 image from local user file?

Hi there,

I’m working on a drag and drop p5 sketch, and it isn’t working so well.

So far I managed to make the drag and drop function, but I cant’ manage to transform the image it get into p5.image objet.

Anyone knows how to do this ?

I found this video but lot of functions used here are not in the p5 reference anymore and are not working in the p5 online editor. @GoToLoop showed me this sketch but I didn’t manage to replicate his way of translating image to p5.image

Here is my sketch, you can run it here

var scan;

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

function draw() {
  if  (scan) image(scan,0,0);

function handleFileSelect(evt) {

  var drop = evt.dataTransfer.files;
	if (drop[0].type === 'image/png')  {
    scan = createImage(drop[0].data);
  else print(drop[0].type);

function handleDragOver(evt) {
  evt.dataTransfer.dropEffect = 'copy';

  // Setup the dnd listeners.
  var dropZone = document.body;
  dropZone.addEventListener('dragover', handleDragOver, false);
  dropZone.addEventListener('drop', handleFileSelect, false);

I found what I needed here :smile: