How to get all files in a directory?

Question

I have a number of files in a folder in React. Each of them must be self-initialized. For this, I need to import them. I wouldn't want to import each file individually. I need to get a list of all the files. But we do not have access to FS on the client. I tried this https://github.com/diegohaz/list-react-files solution, but it does not work (it looks like it somehow uses fs, and gives an error). Can I solve my problem in a straightforward way? Can this be done using the web-pack? Any ideas guys?

Answer 1

Yes, we don't have fs on the client so we need to each file manually. but there is an easy way of doing it.

Make a registry file where you put the path of file from registry.js relative

{
  "file1": "/folder1/sda.png",
  "file2": "/folder2/asd.png"
}

Now you don't need to import each file manually import registry.json

import registry from registry.json

for x in registry {
  try {
     require(`path to registry/${registry[x]}`)
  } catch (e) {
    console.log(e)
 }