locked
Problem Showing contente of Pictures folder

    Question

  • Hi all,

    I'm developing a win8 store application to learn this new framework. Its purpose is to show the folders (with thumnail) of the Pictures Library in a ListView and when the user click on a thumbnail it will show the pictures in the folder.

    OK: the first part is done, I can show all the folders and their thumnail but the second part is getting me crazy!

    I get this error: Javascript run-time error: operation  aborted

    Any ides? Any help is appreciated! 

    Thanks,

    luca

    Here's my code:

    home.html

    <h2>Album:</h2>
                <div id="folderList" 
                    data-win-control="WinJS.UI.ListView"
                    data-win-options="{layout: {type: WinJS.UI.GridLayout}}">  
                </div>
                <div id="folderTemplate" 
                    data-win-control="WinJS.Binding.Template">
                    <div class="imageOverlayGalleryFolder">
                        <img class="imageOverlayGalleryFolderImage" 
                             data-win-bind="src: picture" />
                        <div class="imageOverlayGalleryFolderOverlay">
                          <h4 class="imageOverlayGalleryFolderOverlayText" 
                              data-win-bind="innerText: folderName">
                          </h4>
                        </div>
                    </div>
                </div>
    
                <hr />
    
                <div id="albumPreview">
                    <div id="previewList" 
                        data-win-control="WinJS.UI.ListView"
                        data-win-options="{layout: {type: WinJS.UI.GridLayout}}">  
                    </div>
                    <div id="previewTemplate" 
                        data-win-control="WinJS.Binding.Template">
                        <div class="imageOverlayGalleryFolder">
                            <img class="imageOverlayGalleryFolderImage" 
                                 data-win-bind="src: path" />
                            <div class="imageOverlayGalleryFolderOverlay">
                              <h4 class="imageOverlayGalleryFolderOverlayText" 
                                  data-win-bind="innerText: name">
                              </h4>
                            </div>
                        </div>
                    </div>
                    
    
                </div>

    home.js

    (function () {
        "use strict";
    
        WinJS.UI.Pages.define("/pages/home/home.html", {
            // La funzione viene chiamata quando un utente passa a questa pagina. Popola
            // gli elementi della pagina con i dati dell'applicazione.
            ready: function (element, options) {
                // TODO: inizializzare la pagina qui.
                WinJS.Utilities.query("a").listen("click", this.linkClickEventHandler, false);
    
                var folderView = document.getElementById("folderList").winControl;
                var template = document.getElementById("folderTemplate");
    
                folderView.itemTemplate = template;
                folderView.itemDataSource = PhotoFaces.Library.foldersList.dataSource;
    
                var previewList = document.getElementById("previewList").winControl;
                var previewTemplate = document.getElementById("previewTemplate");
                previewList.itemTemplate = previewTemplate;
    
                folderView.addEventListener("iteminvoked", this.folderClicked);
            },
    
            folderClicked: function (eventInfo) {
                var idx = eventInfo.detail.itemIndex;
                console.log("INDEX: " + idx);
                var album = PhotoFaces.Library.getAlbum(idx);
                var previewList = document.getElementById("previewList").winControl;
    
                var array = [{ name: "ciccia", path: "path" }, { name: "ciccio", path: "giggi" }];
                var arrayList = new WinJS.Binding.List(array);
    
                previewList.itemDataSource = album.picturesList.dataSource;
                console.log("fatto");
            },
    
            linkClickEventHandler: function (eventInfo) {
                eventInfo.preventDefault();
                var link = eventInfo.target;
                WinJS.Navigation.navigate(link.href);
    
                Windows.Storage.KnownFolders.picturesLibrary.getFoldersAsync().done(function complete(list) {
                    for (var i in list) {
                        console.log(list[i].name);
    
                    }
                });
                    
            }
        });
    })();
    

    pictures.js

    (function() {
        "use strict"
    
        var Picture = WinJS.Class.define(
            function (path, album) {
                this.album = album;
                var that = this;
                this.album.folder.getFileAsync(path).done(function (file) {
                    that.path = file.path;
                    that.name = file.name;
                    that.file = file;
                });
            },
            {
                album: null,
                path: "",
                name: "",
                file: null
            },
            {
            }
        );
    
        var Album = WinJS.Class.define(
            function (path) {
                this.path = path;
                var that = this;
                this.pictures = [];
                this.picturesList = new WinJS.Binding.List(this.pictures);
                Windows.Storage.StorageFolder.getFolderFromPathAsync(this.path).done(function (fld) {
                    that.folder = fld;
                    that._loadPictures();
                });
            },
            {
                picturesList: null,
    
                _loadPictures: function () {
                    var that = this;
                    this.folder.getFilesAsync().done(function (files) {
                        for (var i = 0; i < files.length; i++) {
                            var file = files[i];
                            if ([".jpg", ".jpeg", ".png"].indexOf(file.fileType.toLowerCase()) != -1) {
                                var pic = new Picture(file.name, that);
                                console.log("name: " + pic.name + " path: " + pic.path);
                                that.picturesList.push(pic);
                            }
                        };
                    });
                }
            },
            {
            }
        );
    
        var Library = WinJS.Class.define(function () {
    
        },
        {
            // instance methods
            
        },
        {
            picLib: null,
            folders: [],
            foldersList: null,
    
            init: function () {
                if (Library.picLib == null)
                    Library.picLib = Windows.Storage.KnownFolders.picturesLibrary;
                if (Library.foldersList == null)
                    Library.foldersList = new WinJS.Binding.List(Library.folders);
            },
    
            loadFolders: function () {
                Library.picLib.getFoldersAsync().done(function (fldrs) {
                    for (var i = 0; i < fldrs.length; i++) {
                        var folder = fldrs[i];
    
                        var obj = {
                            folderName: folder.name,
                            folderPath: folder.path,
                            picture: ""
                        };
    
                        Library.foldersList.push(obj);
                        Library.loadCover(folder, obj);
                    }
                });
            },
    
            loadCover: function (folder, obj) {
                folder.getThumbnailAsync(Windows.Storage.FileProperties.ThumbnailMode.picturesView, 100).done(function (thumb) {
                    if (thumb)
                        obj.picture = URL.createObjectURL(thumb, { oneTimeOnly: true });
    
                    console.log(obj.folderName + ": " + obj.picture);
                });
            },
    
            getAlbum: function (index) {
                return new Album(Library.foldersList.getAt(index).folderPath);
            },
    
            loadCovers: function () {
                for (var i = 0; i < Library.foldersList.length; i++) {
                    var r = Windows.Storage.StorageFolder.getFolderFromPathAsync(Library.foldersList.getItem(i).data.folderPath).done(function (folder) {
                        folder.getFilesAsync().done(function (files) {
                            var obj = {};
                            var j = 0;
                            for (; j < Library.foldersList.length; j++) {
                                if (Library.foldersList.getItem(j).data.folderPath == folder.path) {
                                    obj = Library.foldersList.getItem(j).data;
                                    break;
                                }
                            }
                            if (obj != {}) {
                                if (files.length > 0) {
                                    obj.picture = files[0].path;
                                    console.log("J: " + j);
                                    Library.foldersList.setAt(j, obj);
                                    console.log(Library.foldersList.getAt(j).picture);
                                }
                            }
                        });
                    });
                }
            }
        }); // end of class Library
    
    
        WinJS.Namespace.define("PhotoFaces",
            {
                Library: Library,
                Album: Album,
                Picture: Picture
            }
        );
    })();

    Wednesday, June 19, 2013 3:41 PM

All replies

  • hi,

    It is hard to reproduce the issue,can you give more information such as how to use phote.js and the PhotoFaces.Library is what,so that we can provided better support.

    Regards

    Wednesday, June 26, 2013 8:25 AM
    Moderator