# Upload image to p5 via a dialog box

**URL:** <https://discourse.processing.org/t/upload-image-to-p5-via-a-dialog-box/32291>\
**Category:** Beginners\
**Created:** [September 16, 2021, 9:47pm UTC](https://discourse.processing.org/t/upload-image-to-p5-via-a-dialog-box/32291 "2021-09-16T21:47:21Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![philspitler](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@philspitler](https://discourse.processing.org/u/philspitler)\
**Post date:** [September 16, 2021, 9:47pm UTC](https://discourse.processing.org/t/upload-image-to-p5-via-a-dialog-box/32291/1 "2021-09-16T21:47:21Z")

</div>

Hi, I am thinking of moving one of my Processing projects over to p5 and would like to have the user upload their own image to get processed.

Is there a way to have a dialog box prompt a file upload?

Thanks  
Phil

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 16, 2021, 10:11pm UTC](https://discourse.processing.org/t/upload-image-to-p5-via-a-dialog-box/32291/2 "2021-09-16T22:11:43Z")

</div>

- [Studio Sketchpad : an open studio for creating beautiful code](http://p5js.SketchPad.cc/sp/pad/view/ro.CYTkHWj9smgw8Q/latest)
- [p5js.org/reference/#/p5.Element/drop](http://p5js.org/reference/#/p5.Element/drop)
- [p5js.org/reference/#/p5/createFileInput](http://p5js.org/reference/#/p5/createFileInput)
- [p5js.org/reference/#/p5.File](http://p5js.org/reference/#/p5.File)

---

<div class="post-metadata">

**Author:** ![philspitler](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@philspitler](https://discourse.processing.org/u/philspitler)\
**Post date:** [September 17, 2021, 12:42am UTC](https://discourse.processing.org/t/upload-image-to-p5-via-a-dialog-box/32291/3 "2021-09-17T00:42:14Z")

</div>

Amazing… I tried searching but couldn’t find anything relevant and these are all great.

Much appreciated.

Phil

---

<div class="post-metadata">

**Author:** ![philspitler](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@philspitler](https://discourse.processing.org/u/philspitler)\
**Post date:** [September 21, 2021, 6:44am UTC](https://discourse.processing.org/t/upload-image-to-p5-via-a-dialog-box/32291/4 "2021-09-21T06:44:47Z")

</div>

@GoToLoop I tried to implement some of the code you linked and am having a few problems… I am a novice coder (as you can probably tell).

Basically I start with a default image but would like the user to be able drag a new image in to get treated.

When I run the code it works until I drag a new image in, then it errors.

Any suggestions would be gratefully received.

Thanks

Phil

```auto
let img;
let saveSVG_button;
let sizeSlider;
let spaceSlider;
var dotSize;
var space;

function preload() {
  img = loadImage("will.jpg");
}

function setup() {
let c = createCanvas(1024, 1024);

  noStroke();

  colorMode(RGB);
  ellipseMode(CORNER);
  
  
  
  
  sizeSlider = createSlider(6, 20, 6);
  sizeSlider.position(10, 10);
  sizeSlider.style('width', '400');
  spaceSlider = createSlider(0, 20, 6);
  spaceSlider.position(10, 30);
  spaceSlider.style('width', '400');
  saveSVG_button = createButton('save SVG');
  saveSVG_button.position(200, 10);
  saveSVG_button.mousePressed(saveSVGfunc);
  
  c.drop(gotFile);
  
}

function draw() {
  background(255);
  dotSize = sizeSlider.value();
  space = spaceSlider.value();

  for (var x = 1; x < img.width; x = x + (dotSize+space)) {
    for (var y = 1; y < img.height; y = y + (dotSize+space)) {
      c = img.get(x, y);
      fill(c);
      circle(x, y, dotSize);
    } // end for y
  } // end for x
}

function saveSVGfunc() {
  save('MBTB_Dots.svg');

}

function gotFile(file) {
  img = createImg(file.data, '').hide();
  if (img.width > img.height) img.resize(1024,0);
   else img.resize(0,1024);
  
  
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 21, 2021, 7:12am UTC](https://discourse.processing.org/t/upload-image-to-p5-via-a-dialog-box/32291/5 "2021-09-21T07:12:32Z")

</div>

> [@\[valid reason\] Loading image outside Preload (p5js)](https://discourse.processing.org/t/valid-reason-loading-image-outside-preload-p5js/32234):
>
> Hello! I want to know if there was a way to make sure an image was loaded when loading it outside Preload. I sometimes get “Uncaught ReferenceError: loadImage is not defined” and sometimes it loads. It doesnt seem to be predictable. The reason why I need to load outside preload is because I am creating a “preview art on your wall” module where clients load pictures of their wall at runtime in a product page via a “upload image” button in the page. They can change their wall as they please.

---

<div class="post-metadata">

**Author:** ![gshaw](https://avatars.discourse-cdn.com/v4/letter/g/49beb7/32.png) [@gshaw](https://discourse.processing.org/u/gshaw)\
**Post date:** [September 21, 2021, 9:51am UTC](https://discourse.processing.org/t/upload-image-to-p5-via-a-dialog-box/32291/6 "2021-09-21T09:51:34Z")

</div>

Hi Phil and GoToLoop,  
You can use a callback function in the loadImage() function. The parameters are:  
`loadImage(path, [successCallback], [failureCallback])`

for example something like:

```auto
img1 = loadImage(url, () => {
      // when image loaded do the following steps... for example
      w = img1.width;
      h = img1.height;
      resizeCanvas(w, h); // match canvas size to image
      background(bgColour); // set canvas background colour
    });

```

---

<div class="post-metadata">

**Author:** ![philspitler](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@philspitler](https://discourse.processing.org/u/philspitler)\
**Post date:** [September 21, 2021, 2:58pm UTC](https://discourse.processing.org/t/upload-image-to-p5-via-a-dialog-box/32291/7 "2021-09-21T14:58:26Z")

</div>

Thanks @gshaw in my code I am using “createImage” once a file is dropped so I’m not sure how to implement the callback in “loadImage”.

Do you think you could help me figure that out?

Much appreciated.

Phil

---

<div class="post-metadata">

**Author:** ![gshaw](https://avatars.discourse-cdn.com/v4/letter/g/49beb7/32.png) [@gshaw](https://discourse.processing.org/u/gshaw)\
**Post date:** [September 21, 2021, 11:04pm UTC](https://discourse.processing.org/t/upload-image-to-p5-via-a-dialog-box/32291/8 "2021-09-21T23:04:26Z")

</div>

Hi Phil,

I think what you need is to make a function to process the image once it is loaded, then use this as the “success callback” in the loadImage() function.

In the example I gave above the callback function was built into the parameters passed to the loadImage, which might have made it less clear, so here is some pseudocode for the callback as a separate function.

```auto
var img1; // global variable to hold the image.

whenImageLoaded = function() {
  // do whatever processing steps you need. 
  // In the code I made, the image loaded into a global variable img1, 
  // so here you might do things like resizing the image, or pasting it to the canvas, eg
  // put the image on the canvas with top left at 200,100, with width 100, height 100
  image(img1,200,100,100,100); 
}

// then wherever you need to load your image, you call it with the callback
img1 = loadImage(ImageNameOrURL, whenImageLoaded);

```

I had a quick web search, and found this page that looks like it explains this more:  
[https://nycdoe-cs4all.github.io/units/3/lessons/lesson\_3.1](https://nycdoe-cs4all.github.io/units/3/lessons/lesson_3.1)

In terms of a dialog to upload the image, I have used quicksettings.js. It makes it easy to make a separate canvas to upload files, adjust parameters, upload files, add text/html instructions etc. [https://github.com/bit101/quicksettings](https://github.com/bit101/quicksettings). Alternatively, you can use the native P5js functions as GoToLoop suggests, or else hunt out drag and drop javascript file upload packages.

Hope that helps.

---

<div class="post-metadata">

**Author:** ![philspitler](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@philspitler](https://discourse.processing.org/u/philspitler)\
**Post date:** [September 22, 2021, 5:41am UTC](https://discourse.processing.org/t/upload-image-to-p5-via-a-dialog-box/32291/9 "2021-09-22T05:41:25Z")

</div>

Excellent, thanks I’ll take a look.

Phil