p5.js | función createFileInput()

La función createFileInput() se usa para crear un elemento de entrada con el tipo de ‘archivo’ que el usuario puede usar para seleccionar archivos locales para usar en el boceto. También admite la selección de varios archivos si es necesario.

Sintaxis:

createFileInput(callback, multiple)

Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:

devolución de llamada: es la función de devolución de llamada que se usaría cuando se carga el archivo. Es un parámetro opcional.
múltiple: es una string que especifica si se permite seleccionar varios archivos a la vez. Se puede configurar como «verdadero» o «falso». Es un parámetro opcional.

Valor devuelto: Devuelve un puntero al p5.Element que contiene el objeto de archivo creado.

Los siguientes ejemplos ilustran la función createFileInput() en p5.js:

Ejemplo 1: En este ejemplo, tomaremos un archivo como entrada.

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

Producción:

single-file-selection

Ejemplo 2: En este ejemplo, tomaremos varios archivos como entrada.

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

Producción:

multiple-files-selection