CODEWITHSUNDEEP
jqueryhtmlgoogle-chrome-extensionfilesystemshtml5-filesystem
Mark Estrada
Mark Estrada

Reputation: 9201

Implementing logic in HTML5 FileSystem API

I have this fiddle (please use Google Chrome when running the fiddle).

I would like to know how to properly implement this using HTML 5 file system API.

Use Case: When appending something in the sandbox filesystem API, I would like to check first if the file size of the existing file exceeds a particular threshold level. If so, rename or delete the file.

$(document).ready(function () {
    var messages = "A sample text!";
    navigator.webkitPersistentStorage.requestQuota(1024 * 1024, function (availBytes) {
        window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
        window.requestFileSystem(window.PERSISTENT, availBytes, function (fs) {
            fs.root.getFile("sample.txt", {
                create: true
            }, function (file) {
                console.log("file.name =" + file.name);
                console.log("file.fullPath =" + file.fullPath);

                file.getMetadata(function (md) {
                    //1. check the file size first (md.size)
                    //2. if file size > 100KB
                    //       2.1 delete the existing file or rename it
                    //       2.2 create a new file
                    //   else
                    //       3 create a new file
                }, this.onError);

                file.createWriter(function (fileWriter) {

                    fileWriter.onerror = function (e) {
                        console.log('Write failed: ' + e.toString());
                    };
                    fileWriter.seek(fileWriter.length); // Start write position at EOF.
                    var blob = new Blob([messages], {
                        type: 'plain/text'
                    });
                    fileWriter.write(blob);
                }, this.onError);
            }, this.onError);
        }, this.onError); //end window.requestFileSystem
    }, function (e) {
        console.log('Error', e);
    });

    function onError(e) {
        var msg = '';

        switch (e.code) {
            case FileError.QUOTA_EXCEEDED_ERR:
                msg = 'QUOTA_EXCEEDED_ERR';
                break;
            case FileError.NOT_FOUND_ERR:
                msg = 'NOT_FOUND_ERR';
                break;
            case FileError.SECURITY_ERR:
                msg = 'SECURITY_ERR';
                break;
            case FileError.INVALID_MODIFICATION_ERR:
                msg = 'INVALID_MODIFICATION_ERR';
                break;
            case FileError.INVALID_STATE_ERR:
                msg = 'INVALID_STATE_ERR';
                break;
            default:
                msg = 'Unknown Error';
                break;
        };

        console.log('Error: ' + msg);
    }
});

I used the 

 file.getMetadata(function (md) {
            //1. check the file size first (md.size)
            //2. if file size > 100KB
            //       2.1 delete the existing file or rename it
            //       2.2 create a new file
            //   else
            //       3 create a new file
        }, this.onError);

But I am confuse how to prevent the createwriter from running since they are on the same callback function.

I would like to know how to properly sequence my code such that, I will check first the file size of the existing file prior to appending.

There are a lot of callback functions on the FileEntry interface and I am getting confused if I would put them or use them all at once.

  fs.root.getFile('sample.txt', {create: true, exclusive: true}, function(fileEntry) {
    //fileEntry.getMetadata(successCallback, opt_errorCallback);
    //fileEntry.remove(successCallback, opt_errorCallback);
    //fileEntry.moveTo(dirEntry, opt_newName, opt_successCallback, opt_errorCallback);
    //fileEntry.copyTo(dirEntry, opt_newName, opt_successCallback, opt_errorCallback);
    //fileEntry.getParent(successCallback, opt_errorCallback);
    //fileEntry.toURL(opt_mimeType);
    }, errorHandler);

  }

file.createWriter(function (fileWriter) {})

Upvotes: 0

Views: 771

Answers (1)

petewil-G
petewil-G

Reputation: 99

You can try moving the call to file.createWriter inside the callback which gets the results of the getMetadata call. That way, you will always check the size before proceeding to the call to create the file. The idea is that you have a bunch of async callbacks that you 'chain' together to carry out the stream of processing that you require. If you want to read more, look up 'javascript async patterns' in your search engine of choice. Here is one such page" http://tech.pro/blog/1402/five-patterns-to-help-you-tame-asynchronous-javascript

Upvotes: 1

Related Questions