p5.js createFileInput() Function

The createFileInput() function is used to create an input element with the type of ‘file’ that can be used by the user to select local files to be used in the sketch. It also supports the selection of multiple files if required.

Syntax:

createFileInput(callback, multiple)

Parameters: This function accepts two parameters as mentioned above and described below:

• callback: It is the callback function that would be used when the file is loaded. It is an optional parameter.
• multiple: It is a string which specifies if multiple files are allowed to be selected at once. It can be set to “true” or “false”. It is an optional parameter.

Return Value: It returns a pointer to the p5.Element holding the created file object.

Below examples illustrate the createFileInput() function in p5.js:

Example 1: In this example, we will take one file as an input.

function setup() {
  createCanvas(400, 200);

  textSize(18);
  text("Click on the file input and select a file.", 20, 20);

  inputbtn = createFileInput(processFile);
  inputbtn.position(30, 40);
}

function processFile(file) {
  console.log(file);
  text("The name of the file selected is: "+
                                file.name, 20, 80);
  text("The extension of the file selected is: "+
                               file.subtype, 20, 100);
  text("The type of the file selected is: "+
                                  file.type, 20, 120);
  text("The size of the file selected is: "+
                                  file.size, 20, 140);
}

Output:

Example 2: In this example, we will take multiple files as an input.

let i = 0;

function setup() {
  createCanvas(500, 200);

  textSize(18);
  text("The file input below allows"+
          " selecting of multiple files.", 20, 20);

  inputBtn = createFileInput(processFiles, "true");
  inputBtn.position(30, 60);
}

function processFiles(file) {
  text("The name of the file selected is: " +
                             file.name, 20, 120 + i);
  i = i + 20;
}

Output:

Online editor: https://editor.p5js.org/

Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/amp/

Reference: https://p5js.org/reference/#/p5/createFileInput