p5.js createFileInput() Function Last Updated : 12 Jul, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report 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: 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: 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 More infoAdvertise with us Next Article p5.js clearStorage() Function S sayantanm19 Follow Improve Article Tags : JavaScript Web Technologies JavaScript-p5.js Similar Reads p5.js createInput() Function The createInput() function is used to create an input element in the DOM for accepting text input. The optional parameters can be used to set the type of input that can be entered. You can use the set() function to define the length of the box. Syntax: createInput(value, type) Parameters: This func 2 min read p5.js createWriter() Function The createWriter() function in p5.js is used to create a p5.PrintWriter object that can be used to write or print to various available streams. Syntax: createWriter( name, [extension] ) Parameters: This function accepts two parameters as mentioned above and described below. name: It is a string that 2 min read p5.js createSpan() Function The createSpan() function is used to create a span element in the DOM with the given optional inner html. Syntax: createSpan([html]) Parameters: This function accepts a single parameter as mentioned above and described below: html: It is a string with the innerHTML of the span element. It 1 min read p5.js | attribute() Function The attribute() function is used to add a new attribute or change the value of an existing attribute on the specified element. If the attribute does not specify any value it returns the value of the given attribute, or null if the attribute is not set. Note: This function requires the p5.dom library 1 min read p5.js clearStorage() Function The clearStorage() function in p5.js is used to clear all items present in the local storage set using the storeItem() function. The items are removed for the current domain. Trying to retrieve any item using the getItem() function would now return null. It accepts no parameters. Syntax: clearStorag 2 min read p5.js draw() Function The draw() function is called after setup() function. The draw() function is used to executes the code inside the block until the program is stopped or noLoop() is called. If the program does not contain noLoop() function within setup() function then draw() function will still be executed once befor 1 min read Like