ImageView using image stored at Titanium.Filesystem.applicationDataDirectory displays placeholder, not image

joseym picture joseym · Apr 20, 2011 · Viewed 10.3k times · Source

I'm developing with SDK 1.6.2.

My app uses the camera to capture and save an image to Titanium.Filesystem.applicationDataDirectory.

A tap of the app is supposed to display all stored images (details [path] stored in database) tiled across the screen.

Saving the image:

var image = event.media // from camera success

var filename = new Date().getTime() + "-ea.jpg";

bgImage = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory, filename);

bgImage.write(image);

Storing to database:

var db = Titanium.Database.open('photoDB');
try{
    db.execute('INSERT INTO stored (image) VALUES (?)', bgImage.nativePath);
} catch(e) {
    alert(e.message);
}

db.close();

Showing the Images:

imageArray = [];
images = [];

var db = Titanium.Database.open('photoDB');
var dbrows = db.execute('select id, date, image from stored order by date asc');

while (dbrows.isValidRow()) {

    imageArray.push({
        image:dbrows.fieldByName('image')
    }); 

    dbrows.next();
}

dbrows.close();

// loop thru and display images
for (var i = 0; i < imageArray.length; i++){

    var pushleft = (i % 4) * 75; // tile from left
    var pushtop = Math.floor(i/4) * 96; // determine how far from top

    var file = Titanium.Filesystem.getFile(imageArray[i].image);

    images[i] = Ti.UI.createImageView({
        image: imageArray[i].image, // path to image at applicationDataDirectory
        width: 75,
        height: 96,
        left: pushleft + 5, // logic for positioning
        top: pushtop + 5, // logic for positioning
        store_id: imageArray[i].id
    });

    win.add(images[i]);
}

Unfortunately, while the tiles work the images are just showing the image placeholder, not the stored image.

I have phonedisk, so after building the app for my device I can view the application directory and the images are being stored.

What am I missing?

Answer

joseym picture joseym · Apr 21, 2011

Figured it out, thanks everyone for the help ;) < sarcasm (It's only been a day, I hold no grudges)

Here's what was wrong in case anybody else has a similar issue.

// Create a file name
var filename = new Date().getTime() + "-ea.jpg";

// Create the file in the application directory
bgImage = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory, filename);

// Write the image to the new file (image created from camera)
bgImage.write(image);

When I was storing the image location in the database I was storing the full path bgImage.nativePath. However, when I updated and rebuild the app the apps applicationDataDirectory changed, so the stored path was invalid.

So now I just store var filename in the database and when I display it like this:

images[i] = Ti.UI.createImageView({
    image: Titanium.Filesystem.applicationDataDirectory + Ti.Filesystem.separator + imageArray[i].image, // path to image at applicationDataDirectory
    width: 75,
    height: 96,
    left: pushleft + 5, // logic for positioning
    top: pushtop + 5, // logic for positioning
    store_id: imageArray[i].id
});

Now, even with updates, it always points to the proper applicationDataDirectory