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);
res.send(files);
});
});
Angular Controller
$http.get('/profile/project/').then(function (res){
$scope.projects = res.data;
$rootScope.projectId = $scope.projects._id;
console.log($scope.projectId);
var id = $rootScope.projectId;
console.log("Rausgezogene ID: " + id);
$http.get('/uploads/'+id).success(function (files){
$scope.img = files;
});
});
Display
<li ng-repeat="x in img">
<img ng-src="uploads/{{projects._id}}/{{x}}" width="150" height="100"/>
</li>
Console log
Cheers, Wandkleister.
source to share
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
source to share