Question

2

Loop through all files/images in a folder with Angular

rated 0 times [ 9] [ 7] / answers: 1 / hits: 17771 / 6 Years ago, fri, march 23, 2018, 12:00:00

I have an app with some products and each product has a gallery with a different amount of images. Each of the images has a name that is completely random / no correlation with the other image names.

Each of the product images are in /src/assets/images/products/:id/.

I need to add the paths to a gallery component but I can't loop through them because the names are random. Is there any way to just loop through each file from a folder using only Angular? If not can I do it on the back-end without renaming the files? I'm also running the app on a Node.js back-end if that matters.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

magaly

Add To Favorites

Follow

Total Points: 524

Total Questions: 96

Total Answers: 89

Location: India

Member since Wed, Aug 26, 2020

4 Years ago

answered 6 Years ago tammyb · Accepted Answer

You can't do that with frontend.
What you need to is using your back-end and return file in it.

You are using NodeJs as back-end so can use the fs.readdir or fs.readdirSync methods.

fs.readdir

const testFolder = './images/';

const fs = require('fs');



fs.readdir(testFolder, (err, files) => {

  files.forEach(file => {

    console.log(file); // use those file and return it as a REST API

  });

})

fs.readdirSync

const testFolder = './images/';

const fs = require('fs');



fs.readdirSync(testFolder).forEach(file => {

  console.log(file);

})

Read the full documenation, it may help you to how you can proceed.