# How to create p5 image from local user file?

**URL:** <https://discourse.processing.org/t/how-to-create-p5-image-from-local-user-file/1165>\
**Category:** Coding Questions\
**Created:** [June 22, 2018, 9:22am UTC](https://discourse.processing.org/t/how-to-create-p5-image-from-local-user-file/1165 "2018-06-22T09:22:24Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![colin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/colin/32/230_2.png) [@colin](https://discourse.processing.org/u/colin)\
**Post date:** [June 22, 2018, 9:22am UTC](https://discourse.processing.org/t/how-to-create-p5-image-from-local-user-file/1165/1 "2018-06-22T09:22:24Z")

</div>

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](https://www.youtube.com/watch?v=o4UmGrPst_c) 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](http://p5js.processingtogether.com/sp/pad/export/ro.CYTkHWj9smgw8Q) but I didn’t manage to replicate his way of translating image to p5.image

Here is my sketch, you can run it [here](http://alpha.editor.p5js.org/colin.thil@gmail.com/sketches/HylIuxtbm)

```auto
var scan;

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

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

function handleFileSelect(evt) {
  evt.stopPropagation();
  evt.preventDefault();

  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.stopPropagation();
  evt.preventDefault();
  evt.dataTransfer.dropEffect = 'copy';
}

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

```

---

<div class="post-metadata">

**Author:** ![colin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/colin/32/230_2.png) [@colin](https://discourse.processing.org/u/colin)\
**Post date:** [June 22, 2018, 5:07pm UTC](https://discourse.processing.org/t/how-to-create-p5-image-from-local-user-file/1165/2 "2018-06-22T17:07:16Z")

</div>

I found what I needed here 😄  
[https://p5js.org/reference/#/p5.Element/drop](https://p5js.org/reference/#/p5.Element/drop)