Length of uploaded couchDB attachment always 0 Bytes

Question

So...I'm new to all this stuff and I'm developing an app for android with AngularJS and Ionic Framework and try to upload an audiofile I have recorded with the cordova capture Plugin like this:

// gets called from scope
$scope.captureAudio = function() {
    var options = { limit: 1, duration: 10 };

    $cordovaCapture.captureAudio(options).then(function(audioData) {
        uploadFile(documentID, audioData);

    }, function(err) {
        console.log('error code: ' + err);
    });
};


var uploadFile = function (document, file) {
    var baseUrl = 'urltomydatabase';
    var name = encodeURIComponent'test.3gpp'),
        type = file[0].type,
        fileReader = new FileReader(),
        putRequest = new XMLHttpRequest();

    $http.get(baseUrl + encodeURIComponent(document))
        .success(function (data) {
            putRequest.open('PUT', baseUrl + encodeURIComponent(document) + '/' + name + '?rev=' + data._rev, true);
            putRequest.setRequestHeader('Content-Type', type);

            fileReader.readAsArrayBuffer(file[0]);
            fileReader.onload = function (readerEvent) {
                putRequest.send(readerEvent);
            };

            putRequest.onreadystatechange = function (response) {
                if (putRequest.readyState == 4) {
                    //success - be happy
                }
            };
        })
        .error(function () {
          // failure
        });
};

How the file looks in the console.log:

Playing the recorded file on the device works nice. But everytime I upload the recording and the upload has finished, the uploaded attachment inside the document has the length '0' in the couchDB.

How the created file looks in the database after the upload:

What am I doing wrong?

EDIT: I just found out, when I upload an image, passed from this function as blob, it works well:

function upload(imageURL) {
    var image = new Image();
    var onload = function () {
        var canvas = document.createElement("canvas");
        canvas.width = this.width;
        canvas.height = this.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0);
        canvas.toBlob(function (blob) {
            uploadFile(documentID, blob);
        });
    };
    image.onload = onload;
    image.src = imageURL;
}

So maybe the solution is creating a blob from the audiofile? But everytime I try it, my blob has the size of 0 bytes even before uploading it and I don't find somewhere a great explanation of how to convert a MediaFile object to blob...

score 0 · Answer 1 · answered Jul 31 '15 at 07:14

0

It looks like your code does not send the content of your file as multipart attachment. To see what is really send to couchdb, capture the traffic with wireshark (https://www.wireshark.org/) or such.

answered Jul 31 '15 at 07:14

h4cc

293
2
7

score 0 · Accepted Answer · edited May 23 '17 at 12:29

This thread brought me to the solution, PouchDB purifies it. Now my upload function looks like this and can handle every file format

// e.g capture Audio
$scope.captureAudio = function () {
    var options = {limit: 1, duration: 10};
    $cordovaCapture.captureAudio(options).then(function (audioData) {
        uploadFile(documentID, audioData, 'audio');
    }, function (err) {
        console.log('error code: ' + err);
    });
};

 var uploadFile = function (id, file, mediatype) {

        var fileName = makeID();
        if (mediatype == 'image') var name = encodeURIComponent(fileName + '.jpg');
        if (mediatype == 'audio') var name = encodeURIComponent(fileName + '.3gpp');
        if (mediatype == 'video') var name = encodeURIComponent(fileName + '.3gp');

        db.get(id).then(function (doc) {
            var path = file.fullPath;
            window.resolveLocalFileSystemURL(path, function (fileEntry) {
                return fileEntry.file(function (data) {
                    var reader = new FileReader();
                    reader.onloadend = function (e) {
                        var blob = b64toBlobAlt(e.target.result, file.type);
                        if (blob) {
                            db.putAttachment(id, name, doc._rev, blob, file.type).then(function () {
                                if (mediatype == 'video' || mediatype == 'image') getMedia();
                                if (mediatype == 'audio') $scope.audios.push(source);
                            });
                        }
                    };
                    return reader.readAsDataURL(data);
                });
            });
        });
    };


// creating the blob from the base64 string
function b64toBlobAlt(dataURI, contentType) {
    var ab, byteString, i, ia;
    byteString = atob(dataURI.split(',')[1]);
    ab = new ArrayBuffer(byteString.length);
    ia = new Uint8Array(ab);
    i = 0;
    while (i < byteString.length) {
        ia[i] = byteString.charCodeAt(i);
        i++;
    }
    return new Blob([ab], {
        type: contentType
    });
}

Length of uploaded couchDB attachment always 0 Bytes

2 Answers2