Loop through all files/images in a folder with Angular

Question

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.

This is not possible with frontend only. You have to use node.js fs package and provide a request for your frontend to get alle image ids. — Thomas
– Thomas, Commented Mar 23, 2018 at 8:59

Sara · Accepted Answer · 2018-10-06 00:41:31Z

10

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.

edited Oct 6, 2018 at 0:41

Sara

8,2521 gold badge40 silver badges52 bronze badges

answered Mar 23, 2018 at 9:01

Radonirina Maminiaina

7,0144 gold badges36 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Loop through all files/images in a folder with Angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related