How to put a file input anywhere in the DOM with p5.js

Question

I am using createFileInput() from the P5.js library. More info on that here.

function setup() {
  noCanvas();
  var fileInput = createFileInput(addedFile);
}

When I use this in my setup function it simply adds the element to the end of the HTML page. I cannot figure out how to place the input anywhere within my page, like between some span tags.

I've tried .html(), .value() and even tried placing it directly inline in the HTML file but I cannot get it to appear where I want it. Usually it just disappears or I get an error.

I've tried using this tutorial and looking at the js to figure out how he placed it in the middle of the page but I can't even find that!

Any help on this would be much appreciated!

Answer 1

Your first stop should be the reference.

Specifically, it looks like the parent() function does what you want: it takes an element you created in your P5.js code (in your case, your fileInput variable) and moves it into a parent element in the HTML webpage.

So your first step would be to create an html webpage that contains an element (probably a <div>) in the middle of the page. Then you'd write P5.js code that calls the parent() function and passes in the id of that <div> element.