p5.js createFileInput() Function

Last Updated : 12 Jul, 2025
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. javascript 
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: single-file-selection Example 2: In this example, we will take multiple files as an input. javascript 
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: multiple-files-selection Online editor: https://editor.p5js.org/ Environment Setup: https://www.geeksforgeeks.org/javascript/p5-js-soundfile-object-installation-and-methods/ Reference: https://p5js.org/reference/#/p5/createFileInput
Comment

Explore