Pass fileList object from page 1 to page 2.html

Question

I have a file input to choose multiple files. I know how to display a preview of these images on the same page. But, in my case I want to choose images on page 1 and send this fileList to page 2 to display a preview before uploading. I thought it would be pretty simple, but dint get to have it work.

I looked into local storage and found that File APIs cant be serialized and so tried other work arounds with the FileReader on page 1 and set the reader results to local storage.. I dint want to go with the filereader approach as the number of files and sizes might be really big.

Any idea on how i could pass the fileList object from page 1 after file selection to page 2? I am not sure how FileObjects behave in the usual methods to pass data between pages... Thanks!

Answer 1

I solved my problem by using angular js services.

The code in case anyone is interested:

HTML on page 1:

<input type="file" ng-model-instant id="fileToUpload"  accept="image/*"
                   multiple onchange="angular.element(this).scope().setFiles(this);document.location.href = '/#/page2';"/>

services.js:

angular.module("fileservices", [])
    .service('fileListService', function () {
        var fileList = [];

        return {
            getFileList: function () {
                return fileList;
            },
            setFileList: function(value) {
                fileList = value;
            }
        };
    });

page1Controller:

 .controller("page1Ctrl", ["$scope","fileListService", function ($scope,fileListService) {
        $scope.setFiles = function(element) {
            var files = [];
            // Turn the FileList object into an Array
            for (var i = 0; i < element.files.length; i++) {
                files.push(element.files[i])
            }
            fileListService.setFileList(files);
            var data = fileListService.getFileList();
        };
    }])

page2 controller:

.controller("page2Ctrl", ["$scope","fileListService", function ($scope,fileListService) {
        var data= fileListService.getFileList();
        $scope.getFiles = data;
 }])

Hope it helps!