// Developed on Mac 10.14.6, Chrome 81, p5.js 1.0.0

​

let fileInputWidget = null, myFilenameDisplay = null;

​

function setup() {

  createCanvas(400, 400);

  // Create and position a fileInput

  fileInputWidget = createFileInput(readFileCB);

  fileInputWidget.position(100, 100);

  fileInputWidget.size(200, 15);

  // Create and position a button to right of fileInput. This overlays

  // and hides the label that the fileInput creates.

  myFilenameDisplay = createButton("No file chosen yet");

  let xx = fileInputWidget.x;

  let yy = fileInputWidget.y;

  myFilenameDisplay.position(xx + 78, yy);

  myFilenameDisplay.style("background-color", color(200));

  myFilenameDisplay.size(200, 15);

}

​

function draw() {

  background(220);

  print("Draw(), frame", frameCount);

  noLoop();

}

​

// Callback to process the file selected by user

​

function readFileCB(fileHandle) {

  print("file name:", fileHandle.name);

  print("file size:", fileHandle.size);

  print("file type:", fileHandle.type);

  // Put the filename into our display widget

  myFilenameDisplay.elt.textContent = fileHandle.name;

  // Set size again, so unwanted bumf doesn't show from underneath

  // Your CSS or other JS setup may constrain the widget width ok without this step

  myFilenameDisplay.size(200, 15);

  // Clear value so we can choose the same file twice

  fileInputWidget.value("");  

  loop();

}