How I can add images from local folder to make infinite scrolling in angularjs

Question

I tried many times but still fail to add images. I want to make image gallery and add images for infinite scrolling using angularjs. How can I add images from local folder not from any database is it possible?

<body ng-app="infiniteScroll">
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a href="" class="navbar-brand">Infinite scroll in Angular js</a>
        </div>
    </div>
</nav>
<div role="main" class="container theme-showcase" ng-controller="scrolling">
    <div class="main-wrapper">
        <div class="row" infinite-scroll='loadMore()'>
            <div class="col-xs-6 col-md-3" ng-repeat='image in images'>
                <a class="thumbnail">
                    <img ng-src="*how to add local images here*" alt="{{image}}">
                </a>

            </div>
        </div>
    </div>
</div>

var app = angular.module('infiniteScroll', ['infinite-scroll']);

angular.module('infinite-scroll').value('THROTTLE_MILLISECONDS', 250);

app.controller('scrolling',function($scope, $http){

    $scope.images = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

    $scope.loadMore = function() {
        var last = $scope.images[$scope.images.length - 1];
        for(var i = 1; i <= 12; i++) {
            $scope.images.push(last + i);
        }
    };
});

To select files from a local folder use [](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#File_inputs). — georgeawg, Feb 26 '17 at 18:30
okay thank you for reply but how can i mange it in my scenario ??? confused!! — Zeeshan, Feb 27 '17 at 08:40

RomanMinkin · Answer 1 · 2017-02-27T21:15:36.733

You can not just add images from local folder directly to your code, you need to serve those images so they can be accessibly by URI, like http://localhost/1.jpg

If you on a Mac/Linux the simplest way to achieve that is to use something like Python simple server by running following command from the directory with images:

python -m SimpleHTTPServer 8080

Now if you open in you browser address http://localhost:8080/ you can find indexed list of your images and use theirs urls:

$scope.images = [
     http://localhost:8080/1.jpg,
     http://localhost:8080/2.jpg,
     http://localhost:8080/n.jpg
];

UPDATE

A simple node.js program which serves images from local with HTTP. Update imageDir with your path. Open http://localhost:8080 to see the images per page, the default page is 1, to navigate use http://localhost:8080/?page=2

var http = require('http');
var fs = require('fs');
var path = require('path');
var url = require('url');

var imageDir = '/Users/path/to/images';
var imagesPerPage = 5;

var port = 8080;
var host = "http://localhost:"+port


function getImages(imageDir, callback) {
    var files = [];

    fs.readdir(imageDir, function (err, list) {
        for(var i=0; i<list.length; i++) {
            if(path.extname(list[i]).match(/.(jpg|jpeg|png|gif)$/i)) {
                files.push(list[i]);
            }
        }
        callback(err, files);
    });
}


http.createServer(function (req, res) {
    var parsedUrl = url.parse(req.url, true);
    var page = parsedUrl.query.page;


    // Simple router
    if (parsedUrl.pathname === '/') {
        // Returning JSON array of files per page
        if (typeof page === 'undefined' ||  page <= 1) {
            page = 1
        }

        getImages(imageDir, function (err, files) {
            var out = [];
            var i = (page-1)*imagesPerPage; // will be 0 for the first page
            var limit = i + imagesPerPage

            if (limit < files.length) {
                for (i; i<limit; i++) {
                    out.push({
                        name: files[i],
                        url: host +"/"+ encodeURIComponent(files[i])
                    })
                }
            }

            res.writeHead(200, {'Content-type':'application/json'});
            res.end(JSON.stringify(out));
        });

    } else {
        // Returning an image
        fs.readFile(imageDir + decodeURIComponent(parsedUrl.path), function (err, content) {
            if (err) {
                res.writeHead(404, {'Content-type':'text/html'})
                res.end("File not found");
            } else {
                res.writeHead(200,{'Content-type':'image/jpg'});
                res.end(content);
            }
        });
    }


}).listen(port);

console.log("Server running at " + host);

thank you RomanMinkin but if i add images using localhost in $scope.images array then they will show only first time not will work like infinit scroll or load more ? — Zeeshan, Feb 27 '17 at 08:42
i also have to ask what is better approach to add images for gallery using server http or from the folder as same directory ? — Zeeshan, Feb 27 '17 at 08:47
@Zeeshan, here is a good example if minimalistic infinitive scroll https://sroze.github.io/ngInfiniteScroll/demo_async.html — RomanMinkin, Feb 27 '17 at 20:27
@Zeeshan i updated my original answer with a simple node.js program to serve your needs. use the link above to use as a example on how to make infinitive scrolling to use `?page=n` and pull new list of images. Hope that helps ;) — RomanMinkin, Feb 27 '17 at 21:17

How I can add images from local folder to make infinite scrolling in angularjs

1 Answers1