2

I am using AngularJS and trying to print the date that a file was uploaded to the server by using php's filemtime() function, but I get an error.

Here is what I am trying to use in one of my table cells:

<td><?php $file = 'images/icons/{{icon.fileName}}.png'; echo date('m/d/Y', filemtime($file)); ?></td>

Unfortunately, when you view the page, I get the following PHP error:

Warning: filemtime(): stat failed for images/icons/air_balloon.png in /home/ogmda/public_html/symbols/symbols.php on line 105
12/31/1969

My live demo is here.

Can someone help get me on the right path to get this resolved? Thanks.

Community
  • 1
  • 1
redshift
  • 4,815
  • 13
  • 75
  • 138
  • 1
    You're mixing Angular shorthand which is interpreted on the client with PHP code that is run on the server. At the time you're trying to get the `filemtime()` PHP has no idea what file you're working with and will try to `stat` the file `images/icons/{{icon.fileName}}.png`, without the benefit of Angular's interpolation. –  Mar 11 '15 at 23:20
  • Yea, that's what I figured. Is there a way to delay it sort of like ng's ng-src attribute so the DOM loads first? – redshift Mar 11 '15 at 23:23
  • 1
    No. The two systems run independently on different machines. Either PHP has to know what the file is when it's executing, or you need to fetch the file information after the DOM has loaded, probably by an AJAX call. –  Mar 11 '15 at 23:29
  • Hi @redshift, aware it was a while back but wanted to check if the answer I posted below would be a good option / valid answer when solving your question above. – Harry B Sep 18 '15 at 13:16

1 Answers1

0

What you have here is a classic front end vs back end issue. You have to get everything you need from the server before you then start using it on the front end in Angular (unless you then do another ajax request to get more data).

So the solution I would suggest is that you send more information along with your icon object.

You have this script in your page which goes off to MOCK_DATA2.json to get information. The file needs to not only include the icon.fileName but also an icon.filemtime. You could do that manually or using a server side script to add or generate it.

var iconApp = angular.module('iconApp', ['ngAnimate']);

iconApp.controller('ListController', ['$scope', '$http', function($scope, $http){
    $http.get('js/MOCK_DATA2.json').success(function(data){
        $scope.iconData = data;
        $scope.orderProp = "name";
    });
}]);

Once that's added to iconData you can then change your page's html:

<tr ng-animate="'animate'" ng-repeat="icon in filtered = (iconData | filter: query | orderBy: orderProp)">
                        <td><img src="images/icons/{{icon.fileName}}.png"></td>
                        <td>{{icon.name}}</td>
                        <td>{{icon.group}}</td>
                        <td>{{icon.description | limitTo:50:begin}}</td>
                        <td>{{icon.filemtime}}</td>

                    </tr>

PHP option

If you don't have the option of adding more information to the file then you could load it with php, json_decode() it, loop the icons and get the filemtime for each. Add each to your data then json_encode() and print it to the page's html in a way the javascript can see it:

var iconData = <?php print json_encode($iconData); ?>;

A little more work, and you'd then have the icon data pasted in the html of the page, but might be an easier workflow to manage.

Final option

There is one other alternative, but that would require an additional ajax request per image to attempt to get the file modified time. See here:

Is it possible with javascript to find file's last modified time?

Community
  • 1
  • 1
Harry B
  • 2,864
  • 1
  • 24
  • 44