Corrupted image files after creating zip file by using Cordova FileReader API

Question

I am building a Cordova app and using FileReader API to read available image,video and audio files to create a zip file. My code is as below:

self.dataReader = function(uri) {
    var deferred = $q.defer();
    window.resolveLocalFileSystemURI(uri, function(fileEntry) {
        fileEntry.file(function(file) {
            var reader = new FileReader();
            reader.onloadend = function(evt) {
                deferred.resolve(evt.target.result);
            };
            reader.readAsDataURL(file);
        });
    }, function(error) {
        if (error.code == FileError.NOT_FOUND_ERR) deferred.reject("Message : NOT_FOUND_ERR");
        else if (error.code == FileError.SECURITY_ERR) deferred.reject("Message : SECURITY_ERR");
        else if (error.code == FileError.ABORT_ERR) deferred.reject("Message : ABORT_ERR");
        else if (error.code == FileError.NOT_READABLE_ERR) deferred.reject("Message : NOT_READABLE_ERR");
        else if (error.code == FileError.ENCODING_ERR) deferred.reject("Message : ENCODING_ERR");
        else if (error.code == FileError.NO_MODIFICATION_ALLOWED_ERR) deferred.reject("Message : NO_MODIFICATION_ALLOWED_ERR");
        else if (error.code == FileError.INVALID_STATE_ERR) deferred.reject("Message : INVALID_STATE_ERR");
        else if (error.code == FileError.SYNTAX_ERR) deferred.reject("Message : SYNTAX_ERR");
        else if (error.code == FileError.INVALID_MODIFICATION_ERR) deferred.reject("Message :  INVALID_MODIFICATION_ERR");
        else if (error.code == FileError.QUOTA_EXCEEDED_ERR) deferred.reject("Message : QUOTA_EXCEEDED_ERR");
        else if (error.code == FileError.PATH_EXISTS_ERR) aledeferred.reject("Message : PATH_EXISTS_ERR");
    });
    return deferred.promise;
}

self.packMedia = function(results, type, zip) {
    var deferred = $q.defer();
    var folder;
    if (type == 1)
        folder = zip.folder("images");
    else if (type == 2)
        folder = zip.folder("videos");
    else
        folder = zip.folder("audios");
    var i = 0;
    var sending = [];
    var stp = $interval(function() {
        if (i < results.length) {
            if (sending[i] !== 's') {
                sending[i] = 's';
                self.dataReader(results[i].url).then(function(data) {
                    folder.file(results[i].name, data, {
                        base64: true
                    });
                    i++;
                }, function(msg) {
                    i++;
                });
            }
        } else {
            $interval.cancel(stp);
            stp = undefined;
            sending = [];
            deferred.resolve(zip);
        }
    }, 100);
    return deferred.promise;
}

This code beautifully creates zip packages without any problem on included text files but all the media files are coming corrupted. I can open zip file but when I try to open for example an image, it says corrupted. I couldn't find any proper solution. There seems a problem with the base64 content coming from the API. Did any one pass through this kind of issue?

Answer 1

I did figure out the problem:

The problem was the base64 meta tag coming in front of the base64 data.

Implementing the below code priorly to the base64 data coming from the reader solved the problem:

data = data.split('base64,')[1];