CODEWITHSUNDEEP
javascriptangularjscordova
Michael Maurel
Michael Maurel

Reputation: 97

angular window.requestFileSystem

As first question here, there is something i've been stuck for quite some time, despite me searching on numerous forums. I'm sorry if my english is not perfect, I hope I'm clear enough for you to be able to understand me and help me get through this.

I'm trying to learn some mobile development with Cordova. I choose to use AngularJS to have a better application management, but I can't make is work as I want.

I want to create an application instagram-like, in which memories will be stored. The application uses two pages :

Here is my code (for now) :

note : my code has been translated in english for a better comprehension. I hope I didn"t make any translation error, unrelated to the topic at hand

index.html

<!DOCTYPE html>
<html ng-app="myMemories">
<head>
    <title>My memories</title>

    <!-- Cordova references -->
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>

    <!-- Downloaded files -->
    <script src="scripts/jquery-2.1.4.js"></script>
    <script src="scripts/angular.js"></script>
    <script src="scripts/angular-route.js"></script>

    <!--Personal files-->
    <script src="lib/index.js"></script>
    <script src="lib/app.js"></script>
    <script src="lib/controllers/addMemory.js"></script>
    <script src="lib/controllers/displayMemories.js"></script>
</head>
<body>
    <div class="container">
        <!-- Menu -->
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <ul class="nav navbar-nav">
                <li class="pull-left"><a href="#/">All</a></li>
                <li class="pull-right"><a href="#/addMemory">Add</a></li>
            </ul>
        </nav>
        <!-- Content -->
        <div>
            <ng-view></ng-view>
        </div>
    </div>
</body>
</html>

index.js (first loaded file, auto-generated)

(function () {
    "use strict";

    document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    function onDeviceReady() 
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener( 'resume', onResume.bind( this ), false );

        //angular.bootstrap(document, ['myMemories']); //aborted try
    };

    function onPause() {
    };

    function onResume() {
    };
} )();

app.js (second loaded file, creating the application)

var app = angular.module('mesSouvenirs', ['ngRoute']);

app.config(function ($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "vues/souvenirs.html",
            controller: "souvenirsControleur"
        })
        .when("/ajouteSouvenir", {
            templateUrl: "vues/ajouterSouvenir.html",
            controller: "ajouterSouvenirControleur"
        })
        .otherwise({ redirectTo: "/" });

});

addMemory.html (view to add a memory)

<form role="form" class="col-xs-12">
    <div class="form-group">
        <label for="titre">Title :</label>
        <input type="text" id="titre" class="form-control" ng-model="souvenir.titre" placeholder="Add a memory title" />
    </div>
    <div class="form-group">
        <label for="image">Image :</label>
        <button id="image" class="form-control btn btn-default">Add...</button>
    </div>
    <button class="btn btn-default" ng-click="creatingMemory()">Create</button>
</form>

addMemoryController.js (add a memory. For now, a memory is a static json stored in a local file. Dynamic control will mbe added later on)

app.controller("addMemoryController", function ($scope,$location) {
    //Array of stored memories
    $scope.memoriesList = [];

    //Souvenir courant à ajouter
    $scope.memory= {
        image: "image/mountain.png",
        title:""
    }

    $scope.creatingMemory= function () {
        $scope.memoriesList .push($scope.souvenir);
        $scope.saveArray();
    }

    $scope.saveArray= function () {
        window.requestFileSystem(window.PERSISTENT, 0, $scope.fileSystemReceived, $scope.errorHandler);
        $location.path("/");
    }

    $scope.fileSystemReceived = function (fileSystem) {
        fileSystem.root.getFile("souvenirs.json", { create: true, exclusive: false }, $scope.fileEntryReceived, $scope.errorHandler);
    }

    $scope.fileEntryReceived = function (fileEntry) {
        fileEntry.createWriter($scope.fileWriterReceived, errorHandler);
    }

    $scope.fileWriterReceived = function (fileWriter) {
        var listeSouvenirsText = angular.toJson($scope.listeSouvenirs);
        fileWriter.write(listeSouvenirsText);
    }

    $scope.errorHandler = function (error) {
        console.log(error);
    }
});

Here is my problem : when I click on the "Create" button, I get this JS error : TypeError: window.requestFileSystem is not a function at Scope.$scope.savingArray in (http://localhost:4400/lib/controleurs/addMemoryController.js:19:16)

I even tried to encapsulate the definition using angular.bootstrap(), but I then get this error :

Uncaught Error: [ng:btstrpd] App Already Bootstrapped with this Element 'document'

Could someone tell me what I did wrong ?

Upvotes: 1

Views: 2640

Answers (1)

Michael Maurel
Michael Maurel

Reputation: 97

Alright.

So I found something which seems to resolve that issue. In fact, the poblem wasn't really with the window.requestFileSystem function, but with the browser and app authorizations.

First of all, I have to reset the requestFileSystem depending on the browser used :

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;

Then, I have to request a file Quota. I thought that putting a "0" meant "I don't have any max quota", but this is deprecated. Here is what I had to do :

var requestedBytes = 1024*1024*10; // 10MB
navigator.webkitPersistentStorage.requestQuota (
    requestedBytes,
    function (grantedBytes) {
        window.requestFileSystem(PERSISTENT, grantedBytes, $scope.fileSystemReceived, $scope.errorHandler);
    },
    $scope.errorHandler
);

Upvotes: 1

Related Questions