Opened file gets cached in titanium. Cant view replaced file content while app is running

Question

I am facing a slight issue while editing a file.

I am saving a file (image) with a certain name on ios using the code below. But the problem is that when i replace the image stored in a file (eg temp.jpg) the app still picks up the previous image when i open the file. However the new image can be seen in the explorer. If i restart the app the new image appears while opening the image.

var folder = Ti.Filesystem.getFile(Ti.Filesystem.externalStorageDirectory, 'DocImages');

 // DocImages is a folder for files
 // ImageVar contains the blob for the new image from camera or gallery
 // docImgModel is the model class containing the name and image path of the image

 if(imageVar !== null && imageVar !== undefined){
         if (docImgModel.imagePath !== null && docImgModel.imagePath !== undefined){
              tempFile = Ti.Filesystem.getFile(docImgModel.imagePath);
              if (tempFile.exists()) {
                      tempFile.deleteFile(); // deleting already existing file
              }}


              // in case of changing the image stored in a file(the case in which i have a  
              // problem) the imgFile(below) is same as docImgModel.imagePath (above)

              imgFile = Ti.Filesystem.getFile(Ti.Filesystem.externalStorageDirectory + 'DocImages/', filenameWithExtension); // creating a new file


              // writing image to file
              imgFile.write(imageVar);
              Ti.API.info('new image saved');

              }

}

I was wondering if titanium saves cache of the file already opened and is hence not able to show the new image. If not, is there anything else i am doing wrong or something i could do to make it work.

I just want to show the new saved image. Is there any way to do it.

Thanks.

Answer 1

I haven't worked with opening files from the device, but I ran into a similar issue when trying to update data on my screen. If you are saying when you open the app and it loads the correct image comes up, then the code that you use to load the image appears correct and working. I assume that is the code you posted above. Even that appears to be a code fragment of a more complete file.

You didn't post any UI code, which is probably where your real problem is coming from. You have an object, a view of some sort I'm guessing, that is already rendered using the old image before you load the new image. So debugging, you might see the new image's data loaded in the code above, but the UI element hasn't been assigned or updated correctly.

As a test, I would suggest that you put some test code into your app that allows you to destroy your UI elements and recreate them, you will probably see the picture come up properly in that case.

According to this post: http://developer.appcelerator.com/question/31181/simple-image-refresh

Just assigning the image you loaded to the url of the image should update it. Your example code doesn't show the image object that you are attempting to update and how that communication is made from the code that is loading the image.

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

// create tab group
var tabGroup = Titanium.UI.createTabGroup();

var image1 = 'image1.png';
var image2 = 'image2.png';

//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});

var img = Titanium.UI.createImageView({
    width:100,
    height:100,
    top:50,
    left:110,
    url:image1
});

win1.add(img);

var btn = Titanium.UI.createButton({
    title:'load',
    width:100,
    height:35,
    top:50,
    left:0
});

function switchImage(){
    if(img.url == image1){
        img.url = image2;
    } else {
        img.url = image1;
    }
}

btn.addEventListener('click',function(){
    switchImage();
});

setInterval(switchImage,3000);

win1.add(btn);

//
//  add tabs
//
tabGroup.addTab(tab1);  


// open tab group
tabGroup.open();