Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

p5.js | createFileInput() Function

  • Last Updated : 26 Feb, 2020

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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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:

single-file-selection

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:

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!