​

function setup() {

  createCanvas(400, 400);

  select("#droparea").dragOver(highlight);

  select("#droparea").dragLeave(unhighlight);

  select("#droparea").drop(gotFile, unhighlight);

}

​

function draw() {

  background(220);

  if( img ){

    image(img,0,0,width, height);

  }

}

​

function highlight() {

  select("#droparea").style("background-color", "gray");

}

​

function unhighlight() {

  select("#droparea").style("background-color", "white");

}

​

function gotFile(file) {

  if (file.type === "image") {

    img = loadImage(file.data, ""); // if you wanna load into PImage class

    select("#droparea").html(

      "<img src=" + file.data + " width=100% height=100%></img>"

    );

  } else {

    alert("Invalid File Type: image type only");

  }

}

​