img from ms-appdata:///local not showing using Winjs/cordova

I'm building a small application using Visual Studio and cordova tools. The app displays a series of questions, and on each one, the user can take multiple photos and draw in them.

The app it targetting Windows 8.1, but in the future is going to target android, so I've tried not to use native windows functions.

In the app there is a overlay where the user can take a photo using the cordova-pluggin-camera. The photo taken is then shown in a img element, then it's copied to a canvas element to be drawn in and when the user saves the photo (with the user drawing) to ms-appdata://local/XXX.png. The image is correctly saved, and I've checked on the file system for it and it's there and is a valid png file.

This is the code I use to write, using cordova-plugin-file (v 4.1.1-dev) the image to a file:

window.resolveLocalFileSystemURL(store, function (dir) {

                console.log("got main dir", dir);
                //gravar imagem para ficheiro          
                dir.getFile(fileAnotacao, { create: true }, function (file) {
                    console.log("got the file", file);

                    setTimeout(function () {

                        if (apagou) { //apagou a referencia, criar nova e criar ficheiro
                            dir.getFile(fileAnotacao, { create: true }, function (file) {
                                writeLog(decodedData, file);
                            });
                        } else
                            //grava ficheiro
                            writeLog(decodedData, file);
                    }, 1500);

                    //1º apaga ficheiro se existir
                    file.remove(function () {
                        console.log('File removed.');
                        apagou = true;
                    }, fail);
                });
            });

The writelog function is this:

 function writeLog(str, lob) {
    if (!lob) return;

    lob.createWriter(function (fileWriter) {

        fileWriter.seek(fileWriter.length);

        fileWriter.write(str);
        console.log("ok, in theory i worked");
    }, fail);
}

After saving the file to disk, I update a namespace with the Path of the two files. The original, named "original" and the drawn one named "anotacao".

After that I update a second namespace with the filenames that is connected to a Winjs Flipview component. I use a second namespace, because I only want to show the images from a subsection of the original namespace, i.e. from one question.

function AtualizarFotos() {

    var id = document.getElementById("id_val_foto").innerHTML;

    //atualizar namespaces com as fotos
    var idq = id.split("_");
    //quest is used to fectch the correct question, so it knows what photos to show
    var quest = GetPergunta(idq[1]);
    if (quest) {
        if (FotosNP.ftList) {

            FotosNP.ftList.splice(0, FotosNP.ftList.length);
            quest.Fotos.forEach(function additem(value, index, array) {
                FotosNP.ftList.push(value);
            });
     //updates a counter
            document.getElementById("contaFotos").innerHTML = FotosNP.ftList.length;
        }
    }

In the HTML I have a template and a fliview connected to the FotosNP namespace. If put "original" in the binding field, the flipview works correctly. If I put the "anotacao" in the binding field the image is not loaded, even if I close and open the overlay.

Both photos are saved to the same folder: ms-appdata:///local/.

I've checked the HTML using DOM inspector and the src attribute is correct. I've tried using the Javascript console and display the drawn photo on a image tag, and it's not displayed also.

I've tried setting a timeout before updating the Flipview namespace, because I tought that it might be some sort of delay in writing to disk.

I've tried different components, and also using a plain img element, and it doesn't show the photo.

photo not shown error

If I close and run the application again, and load the saved questions with photos, the photos are shown correctly.

What am I doing wrong on the file write? Please help.

After some days working on this, and finally asking for some help, I figured out it was indeed a delay, caused by the write function.

I solved it placing the namespace updates on the onwriteend event of the filewritter.

fileWriter.onwriteend= function (evt){
    console.log("ok, in theory i worked");
    quest.Fotos.push({ 
        id: idFoto, 
        original: app.lastCapture, 
        anotacao: store + fileAnotacao 
    });
    AtualizarFotos();
}

I had already tried setting a timeout, but the time must not have been sufficient. With this I get some lag, but at least it works.