title: Use image uploaded through HTML DOM file uploader in p5js
body: <p>I am attempting to allow users to upload their image file through DOM file uploader ( that is <code>&lt;input type="file"&gt;&lt;/input&gt;</code>) but after I do that I am unsure how to move the image to JavaScript and process it using p5.js. How do I convert an HTML file to a p5.js file or an array of pixels, or really anything I can work with or read as values in JavaScript?</p>
  
  <p>First I restricted the element to only accept <code>.png</code> and <code>.jpg</code> files.</p>
  
  <p>Then I tried using <code>.file[0]</code> syntax and tried to load the image through its path using <code>.value</code> inside of the <code>loadImage()</code> function.</p>
  
  <p>Neither works, and I am just generally unsure as to what to do from this point.</p>
  
  <pre><code>&lt;div id="uploadMenu"&gt;
    &lt;h4&gt;Please select your image file:&lt;/h4&gt;
    &lt;input accept=".png, .jpg, .jpeg" type="file" id="imageUpload"&gt;
    &lt;button onclick="fileToGrid()"&gt;Done&lt;/button&gt;
    &lt;script&gt;
    &lt;/script&gt;
    &lt;script&gt;
    let thisWindow = document.getElementById("uploadMenu");
    let windowWidth = thisWindow.style.width;
    console.log(windowWidth);
    thisWindow.style.left = `${innerWidth/2 - 100}px`
    thisWindow.style.top = `${innerHeight/2 - 50}px`
    &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre><code>function fileToGrid() {
    let uploadFromHTML = document.getElementById("imageUpload");
    let uploadedImage = loadImage(uploadFromHTML.value);
    let imageW = uploadedImage.width;
    let imageH = uploadedImage.height;
    console.log(imageW, imageH); 
  // the end goal is to convert this image to an array of its pixel values
  }
  </code></pre>