Load image directory in AngularJS

I am trying to implement an image gallery in my Angular app. I was able to upload photos in this post: File upload: create directory if it doesn't exist .
Therefore, the files are placed in a subdirectory based on project_id

. This works great.
So now I would like to display the entire set of images for the project. How can I access a subdirectory based on project_id

and how can I display a set of images in a convenient way? Any ideas are appreciated.

My attempt at routing to a subdirectory. The GET request looks ok, the project_id is being sent to the route. I can access the directory with HTTP 200 code, but displaying images won't work when I get a 404.

app.get('/uploads/:id', function (req, res, next){
    fs.readdir('uploads/'+req.params.id+'/', function (err, files){
        if (err) return next (err);


Angular Controller

$http.get('/profile/project/').then(function (res){
    $scope.projects = res.data;
    $rootScope.projectId = $scope.projects._id;
    var id = $rootScope.projectId;
    console.log("Rausgezogene ID: " + id);
    $http.get('/uploads/'+id).success(function (files){
        $scope.img = files;



<li ng-repeat="x in img">
    <img ng-src="uploads/{{projects._id}}/{{x}}" width="150" height="100"/>


Console log

Console Log

Cheers, Wandkleister.


source to share

1 answer

You are basically confusing your server. You need to put images somewhere else that don't have a REST endpoint. When you make a request to get an image so that it can be displayed, your API doesn't know it. He thinks you are trying to access a REST endpoint.

Put the images somewhere, for example /public/images

if you're using a shared folder or something that doesn't have an endpoint configured for it - just a regular folder but public.

OR you can keep it in downloads and change the api endpoint to something else. Just return the same directory listing.

For example: $http.get('/getUploadsDir/someID')

- returns a list of files for/uploads/someID



All Articles