How to save a remote image/picture to database or filesystem
I create a remote imageview, I want to save the remote image to database or filesystem.
I tried this code:
var img_url = "http://www.google.com/intl/en_ALL/images/srpr/logo1w.png";
var remote_image_view = Ti.UI.createImageView({
url:img_url
});
var db = Ti.Database.open("imgdb4");
db.execute('CREATE TABLE IF NOT EXISTS DATABASETEST (ID TEXT, IMAGE BLOB)');
db.execute('DELETE FROM DATABASETEST');
//add a listener, when the remote img has been download:
remote_image_view.addEventListener("load",function(e){
//after download
Ti.API.info(e.source.toBlob());//output: [INFO] [object TiBlob]
try{
//I tried use e.source.toBlob(), but looks not work
db.execute('INSERT INTO DATABASETEST (ID, IMAGE) VALUES(?,?)',"picture name",e.source.toBlob());
}catch(E){
//I got error,
alert(E);
}
});
//add imageview to the window
Ti.UI.currentWindow.add(remote_image_view);
var btn_show_db_image = Titanium.UI.createButton({
title:'I am a Button',
width:200,
height:40,
top:60
});
btn_show_db_image.addEventListener("click",function(e){
try{
//Try to retrive the image from database and use for another imageview
var rows = db.execute('SELECT * FROM DATABASETEST');
var db_image_view = Ti.UI.createImageView({
image:rows.fieldByName('IMAGE').toBlob()
});
rows.close();
Ti.UI.currentWindow.add(db_image_view);
}catch(E){
//my app crashed
alert(E);
}
});
Ti.UI.currentWindow.add(btn_show_db_image);
7 Answers
-
Accepted Answer
I have a function made for this:
var get_remote_file = function(filename, url, fn_end, fn_progress ) { var file_obj = {file:filename, url:url, path: null}; var file = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory,filename); if ( file.exists() ) { file_obj.path = Titanium.Filesystem.applicationDataDirectory+Titanium.Filesystem.separator; fn_end(file_obj); } else { if ( Titanium.Network.online ) { var c = Titanium.Network.createHTTPClient(); c.setTimeout(10000); c.onload = function() { if (c.status == 200 ) { var f = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory,filename); f.write(this.responseData); file_obj.path = Titanium.Filesystem.applicationDataDirectory+Titanium.Filesystem.separator; } else { file_obj.error = 'file not found'; // to set some errors codes } fn_end(file_obj); }; c.ondatastream = function(e) { if ( fn_progress ) fn_progress(e.progress); }; c.error = function(e) { file_obj.error = e.error; fn_end(file_obj); }; c.open('GET',url); c.send(); } else { file_obj.error = 'no internet'; fn_end(file_obj); } } };
-
Yop,
Needs a bit of error handling but it's straightforward :
getRemoteFile: function(file, remote) { var f = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory,file); if (!f.exists()) { var c = Titanium.Network.createHTTPClient(); c.onload = function() { f.write(this.responseData); } c.open('GET',remote, true); c.send(); } return f.nativePath; }
It takes an (filename, remote uri) as arguments , looks on the FS to see if it's there, else download it, store it and finally return the path on the file sytem as a string (absolute path, should be crossplatform).
-
hey everybody,
i got a problem with the filesystem savings of titanium. i use this function:
var c = Titanium.Network.createHTTPClient(); c.onload = function() { var f = Titanium.Filesystem.getFile('images/retailer/' + branch.newsId +".jpg"); if (!f.exists()) { f.write(this.responseData); } addAnnotation(f.nativePath, branch, branchArray); }; // open the client c.open('GET',url); // send the data c.send();
everything works fine on emulator and he saves the pictures in the right folder but if i use this function on the iphone the photos wont be saved. i use the images on a map as a annotation but ill get the red dots everywhere.
note:
the images i already downloaded on the emulator will be shown on the map. just the new ones dont appear.anyone knows about this bug or is it a problem of the system rights ?
best regards
vitalij -
Does "write" happen instantaneously?
when I do this….
var f = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory,filename); if(f.exists()) { trace('file exists'); } else {trace("file doesnt exist");}
It always says file not found. Maybe I have to wait a little before doing exist check?
-
here it is:
get_remote_file = function( 'saved_on_the_device.html', 'http://yahoo.com', function(fileobj){ Ti.API.info(fileobj) alert('done') }, function(progress){ Ti.API.info(progress) } )
If you already have the file on the device will serve what u have on the device else will save what it gets from the net
-
With my code, I'm getting between 7-10 files downloaded before it decides to stop. There are 72 images to download, yet it decides to cut short at any given number.
Any idea why this could be happening?
var get_remote_file = function(filename, url, fn_end, fn_progress ) { var file_obj = {file:filename, url:url, path: null}; var file = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory,filename); if ( file.exists() ) { file_obj.path = Titanium.Filesystem.applicationDataDirectory+Titanium.Filesystem.separator; fn_end(file_obj); } else { if ( Titanium.Network.online ) { var c = Titanium.Network.createHTTPClient(); c.setTimeout(10000); c.onload = function() { if (c.status == 200 ) { var f = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory,filename); f.write(this.responseData); file_obj.path = Titanium.Filesystem.applicationDataDirectory; fn_end(file_obj); } else { file_obj.error = 'file not found'; // to set some errors codes fn_end(file_obj); } }; c.onreadystatechange = function(e) { if(e.readyState == 4) { fn_end(file_obj); } }; c.ondatastream = function(e) { if ( fn_progress ) fn_progress(e.progress); }; c.error = function(e) { file_obj.error = e.error; fn_end(file_obj); alert('Error with Download'); }; c.open('GET',url); c.send(); } else { file_obj.error = 'no internet'; fn_end(file_obj); } } }; for (var d=0;d<items[c].prereqs.length;d++) { get_remote_file( items[c].prereqs[d].imagename, items[c].prereqs[d].imagesource, function(fileobj) { Ti.API.info(fileobj); }, function(progress) { Ti.API.info(progress); } ); }
-
I'm interested into this. I want to know how to download an image from a server and store it locally without using an imageView.