caching images & data with phonegap locally - javascript

I have a phonegap app using slim with ajax front. When I listing a certain page, I would like to cache the data and then just use that till user refreshes or sends a trigger for new data.
so far I have this for caching json data:
//caches the JSON data into localstorage
try {
localStorage.setItem('cachedProducts', JSON.stringify(data));
JSON.parse(localStorage.getItem('cachedProducts'));
var bar = localStorage.getItem('cachedProducts');
clog(bar);
} catch (e) {
clog("didn't work");
}
it works. but i have no idea how to save images or how to trigger the server for new data. thank you.

If your need is to save small number of image then you can convert it in to base64 string and store it in to local storage. You can covert images in to base64 string using canvas. If user tries to refresh the content then you connect to the server and cache the latest content.

Related

Upload image to a server (picasa/dropbox/etc) and retrieve the url to save it on my database

I'm developing a web application right now and i want to upload an image from a form to an external server like picasa, dropbox or any cloud server that is trustable. Then i want to retrieve the url of the uploaded image and save it to my database using javascript, html or php.
I have done everything (form, web app, database connection).
I only need a guidance guys, so i hope someone who done this before can point me to the right direction.
PD: This app will be used by users, so it should be easy to use for them (upload image, preview, fill form and save form-no account loggin or anything like that)
Thanx and i'm sorry if my english is bad.
it depends of service image, by example dropbox have an API and the PUT method to upload files, this method returns info in JSON format that you can use to store in your own database (https://www.dropbox.com/developers-v1/core/docs#files_put).
User Selects a file () >> Then you call the API methods (of the service to use) >> Catch the return data and then call your method to store info in your own DB
Can use Jquery AJAX to do API calls

How to re-pull from file if data changes in NodeJS?

My javascript is currently pulling JSON data from a server I made in NodeJS. The data is coming from a google spreadsheet, so whenever I make changes to the spreadsheet the JSON data changes too.
I do not want to have to refresh my site to apply the updated spreadsheet data. How can I pull from the JSON file every time there is a change made? Someone mentioned using timestamps on the file and if the time stamp changes, then pull from the file. But I could not find an example.
Right now I am pulling data from the /latest route in my node server to my javascript. Code below:
app.get('/latest', function(req,res) {
var fs = require('fs');
var obj;
fs.readFile('public/announcementCurrent.json', function (err, data) {
if (err) throw err;
obj = JSON.parse(data);
res.json(obj)
});
})
This is how I call the route in my javascript:
$http.get('http://localhost:3000/latest')
How can I call the route again when the announcementCurrent.json file changes without having to refresh?
Any help would be great thanks!
The way to get updated data in real time in javascript without having to refresh the page is the whole idea of XMl Http requests, aka AJAX.
Basically you will need, at some time interval or user action of your choice, query the Google API to get the latest data and update your page accordingly.
You should try to get more informations about how to make an ajax call, and how to query the google spreadsheet API. Basically, using jQuery for instance (hum), it would look like:
$.get('http://google-spreadsheet-api-url', function( data ) {
// Dynamically refresh the content of the page using data
})

Store filepath/image locally on smartphone and upload later?

I'm building a HTML/JS app that I will build into a PhoneGap IOS/Android app, to help a friend fill in in survey forms on her smartphone, store them on the phone and then upload them to a server when she gets 3G coverage.
My problem right now is that I want to attach photos to these forms. My plan was use jquery to serialize the path to the file, store it in localstorage and then upload via ajax later. However this doesn't seem to work.
Is there any way to store the path to an image, and then still be able to upload it later? or do I have to store the whole file somehow?
From Phonegap documentation:
navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );
The return value will be sent to the cameraSuccess function, in one of the following formats, depending on the cameraOptions you specify:
A String containing the Base64 encoded photo image.
A String representing the image file location on local storage (default).
It would be simpler to just put the base64 in the localstorage and get it at the time of uploading, but if you prefer you should be able to store the path, then retrieve data from it and upload when you have connectivity.
[EDIT]
I didn't think about the problem pointed out by #jaay in the comments. What if the file changes at a later time? Maybe it is just better to store base64 data.

Image corrupted or truncated Phonegap

I'm using Phonegap to develop an android application. Users take photo, the photo is stored in a mysql database (medium-blob column). I store them using a simple INSERT INTO query, without changing the data. The data are sent server side using a REST call (PUT)
Here's an example of the content of this column:
thumb = '/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDACgcHiMeG...'
It is written on the phonegap documentation that the image captured through the camera is encoded in base 64.The problem is, when i try to retrieve my images in the database, I cannot display them using this JS code :
$('#myImg').attr("src", "data:image/png;base64," + data
Any ideas of where this "Image corrupted and truncated" come from ? :(
The problem was located in the way I was sending the images.
I was sending the data through a string. I tried to pass them nested in a json object and It worked.

send predefined data to browser local storage with .crx

I am building my first chrome extension, for that I want to have some predefined data at client browser.
I want that data be able to be edited by user by means of extension and save back the changes.
I first thought of using HTML5 local database or Indexed Database APIfor this.(Am I doing right?)
But I don't know how can I send this local database to client place in .crx..because the database will be with browser rather than extension.
How can I send data to client side browser by .crx and save the data on browser?
(I know its not right to save data on browser, but I can't save data back if I save data along with extension)
What other way I can use to implement the requirement?
can I use the same method if I want to use Indexed Database API instead?
My data is not simple key value pair but table kind of data.
I don't have any code for data access part, because I want to be sure before I can proceed
No, You can't send database file with ctx file. Simply You can't replace it on client side.
Actually you have two options:
1) save predefined data into your extension (in any extension file. save whole query or data as JSON) and after first run exec those query to local Database.
2) create web service from where you will get predefined data and save it to local DB.
For example (data.json):
[{"name":"name", "desc":"desc","some_column":"some value"},{"name":"name", "desc":"desc","some_column":"some value"}, ...]
In background.html:
var xhr = new XMLHttpRequest();
xhr.open('GET', chrome.extension.getURL('data.json'), false);
var dataStr = xhr.send(); //don't do this way. use asynch api :)
var data = JSON.parse(dataStr);
//connect to local database
for(var _item in data){
//create query to insert data into DB
//and exequte query
}

Categories