How to get a folder fileList?

p5.js
1

Hi!

I try to get a folder filelist for load images in batch with function… but don´t work…

Any suggestion?

function getDirectories(path) {
    var fs = require('fs');
    var files = fs.readdirSync(path);
    console.log(files[0]);
}

I´m noob on javaScript, i dont know require().

2

p5.js is a frontend library. That is, it just controls what you can see and interact with in the browser, and doesn’t have access directly to the filesystem. The code you posted is for use with backend code, like a node.js server. It is possible for frontend code and backend code to communicate with each other, but you won’t be able to run this code directly from your p5.js sketch. More on frontend vs backend code here.

To answer your question directly, from the p5.js sketch itself, there is not a way to list the files in your filesystem or folder.

2 Likes
3

If you are working in the back end, then let us know. For demonstration purposes (I haven’t tried this) you should be able to run a local host in your computer, then you use js to access/inquire your local server to get this info for you. As I said, this is good for demonstration purposes but it might need to be reconsider based on your final goal.

For local servers, check this link.

Kf

1 Like
4

depending on what you are trying to do there are some ways to kind of get around having to do this on the back end with having a user select a file with a file picker before using the file in JS. This way it’s on user choice and not penetrating the secure walls of the browser: https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

2 Likes
5

Hello, first of all thanks for the help, what I’m trying to do is a function that loads a folder of images.

The idea is not to directly use the loadImage function (file), it is better to use the new function loadImages (
path), where a location relative to the script is passed as parameter, for example “/ data / images /” and the function is responsible for generating a list of files and loading them into an image matrix.

An example of this has already been created for java processing:

PImage[] loadImages(String nameFolder) {
    java.io.File folder = new java.io.File(dataPath("")+"/"+nameFolder);
    String[] filenames = folder.list();
    PImage[] img = new PImage[filenames.length];
    for (int i = 0; i < filenames.length; i++) {
        img[i] = loadImage(dataPath("") + "/" + nameFolder + "/" + filenames[i]);
    }
    return img;
}

And this is the same thing for Android mode:

i

mport android.content.Context;
import android.app.Activity;
import android.content.res.AssetManager;
//------------------------------------------------------------
PImage[] loadImages(String folderName_){
  Activity act= this.getActivity();
  AssetManager assetManager = act.getAssets();
  PImage img_[] = null;
  try{
    String[] imgPath = assetManager.list(folderName_);
    img_ = new PImage[imgPath.length];
     for(int i=0; i<imgPath.length; i++){
     img_[i] = loadImage(folderName_ + "/" + imgPath[i]);
    }
  }
  catch(IOException ex){
       System.out.println (ex.toString());   
  }
  return img_;
}

and now I’m trying to do the same in p5.

6

If you are unable to use the file picker in the HTML5 spec, you’ll have to use node.js and fs.readdir which run on the backend and can have access to the filesystem. check out @lmccart’s post above for all the details.

7

Thank´s! i see the info with calm.