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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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);
}

chevron_right


Output:

single-file-selection

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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;
}

chevron_right


Output:

multiple-files-selection

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

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

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

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.