Save ,retrieve and upload data to a remote server

ionic-v1
1

Hello all,
Many thanks for all your tutorials that have greatly helped and helping us in so many ways.
Please, i have problem at hands to solve though i’m a newbie in angular/ionic.

  1. I have a form that contains several inputs to collect personal info like names, gender, DOB, Occupation etc. At the bottom of the form i have image tag and a button to display and capture image respectively. I was able to capture and displayed the captured image.

PROBLEM STATEMENT:

  1. I would like to save all the personal info including the captured image on a local storage. Why? because of bad network.

  2. I would like to retrieve the saved info and image and upload to a remote server.

Please, i would be so grateful if you can illustrate this with a simple and short tutorial as you wish.
Thanks once again.

2

Follow this tutorial for writing the LocalStorageService:

http://learn.ionicframework.com/formulas/localstorage/

Once you have the localstorage service, you can set the data you need (user’s info).

Then when you want to upload it, you GET the info from localstorage, and make a POST request to your remote server.

As far as when you want to upload, thats up to you. You could do something like periodically checking the network connection, and once its over a certain value that you deem passible, then make the POST request to the server.

Does this help?

3

Thanks for your response.
The link u gave explain some insight but does not address what i am trying to do.
Please, can you help further.

4

storing an image in localstorage is a really bad idea… you localstorage has a limit round about 5mb… if you have an image ~5mb your localstorage is full.

if you want to store it --> write it to a file or store it as blob in a local db.

if you want to automatically synchronize you info if you are back online i can recommend PouchDB. In other cases you can use “cordova-plugin-network-information” to get informed if the device is back online and send the request manually.

2 Likes
5

Thanks so much.
I would check PouchDB, and can it accomodate image data as well?

6

you can store base64 string or real blobs in there.

7

Thank you sir. Pls i have been trying but cannot get it to work.
Here is the link to my app.
https://drive.google.com/file/d/0BzqArLT5flPEM19oSjh5aC1nV0U/view?usp=sharing

The challenges i am having is:

  1. Cannot save the data and image to my local file system.
    Note: I want to use the App to register the info and pictures of many people. Save, and preview for later upload to remote server.

Many thanks.

8

I took a look at your code.

First, you aren’t using anything for storage. As bengtler mentioned, I would look into PouchDB.

Here is a good tutorial for doing that:

http://devgirl.org/2014/12/30/sync-data-using-pouchdb-in-your-ionic-framework-app/

I’m not really seeing anything “wrong” with your code. Just you aren’t saving it anywhere.

You have the right format for getting the pictures, the camera will return the image in base64 encoding.

What you need to do next is save this base64 (pictureURL in your code) to a DB.

I would work on getting PouchDB or another backend setup for the project. I made the mistake in saying to use localstorage. Again bengtler is correct that localstorage should not be used for images, since they will take up all your storage space. It works well for me when I need to save a few small strings, like username.

I’ve had much luck with uploading images to Parse via their file api, as well as with AWS S3. If you need help getting started, let me know.)

Quick example for Parse:

  1. Initailize Parse for your app. (https://blog.nraboy.com/2015/04/use-parse-core-in-ionic-framework-mobile-apps/)

  2. (Optional) User logs in. This way you know what user uploads what image and you can retrieve their images.

  3. User takes photo. (you got that part down!)

  4. Upload photo to Parse via their File API. (I can’t remember if parse accepts base64 uploads for images. If not, change the camera.destinationType from Camera.DestinationType.DATA_URL to Camera.DestinationType.FILE_URL, which will return the actual file location on the device.)

  5. The file upload returns a URL of where the file/image is saved on their server. Don’t lose this, as there is no way to retrieve it.

  6. Save this url to the user object on parse. You could create an array on the parse user object called Images, and you would just push the url to that array. You could also save this URL to localstorage, though I wouldn’t recommend that as sometimes localstorage can get cleared and you won’t have their image URLs any more.

  7. (Optional) When a user logs in successfully, if you are using parse, you will get back their entire user object which will have their images (if you saved it like step 6).

  8. With this array, you can attach it to a scope variable in your controller, and then using an ng-repeat, display all the user images.

  9. Polish app.

  10. Release

  11. ???

  12. Profit!

Good luck. I love building apps so I’m happy to help if you get stuck, though something tells me you got this :wink:

9

Thanks so much for the explicit insight you provided about my concerns.
Asper the parse option,i believe it’s a cloud base, but i would like to use PouchDB or SQLite.
Since, my concern is to store information locally, push to the remote server at my convenience time.
Many thanks as i await your further guidance.

10

Hello Mr DaDanny,
I am trying to get used to SQLite for my work.
I was able to save to database and also retrieve saved data.
However, i am trying to edit any of the retrieved data by implement navigation to edit page using state parameter, but after doing the necessary, the navigation to edit page is not working. pls kindly look into it sir.
The link: https://drive.google.com/file/d/0BzqArLT5flPEendNNjJSOHBCRk0/view?usp=sharing

11

Instead of using state parameters, I’d do something like this:

  1. User selects data

  2. Call Service to set which data they clicked on

  3. Do navigation without state parameters

  4. Do something like this:

    $scope.$on(’$ionicView.afterEnter’, function(){
    // Call service to get data they clicked on
    // Perform action on said data
    });

Does that make sense?

12

Thanks for your great concern.
Sir, i have been battling with it for quite some time now. I followed the home website of PouchDB but i wasn’t able to save a single pic to PoucDB, though i was able to save text to it.
And i would be so grateful, if you can put me through with a simple illustration.

Many thanks

13

In pouchdb they are called “attachements” --> there is a nice guide in the pouchdb docs:
http://pouchdb.com/guides/attachments.html

If you do not have luck with that, too --> make a post.

14

Thanks to you sir. I have gone through the link and gain some insight.
However, i am trying to get how to attach image to my array object in such way as to grab the image data immediately the picture is taken and then pass it as an attachment to the object array.

Currently, i pass the image data directly to the object array like this: $scope.birthday.pictureString = data;
Here, birthday is the object array and pictureString is the reference variable and data is the image data from camera. The image data got stored but not as attachment and performance drastically reduced.

Also, for each record i take i.e name, birthday-date which got stored in birthday array object, as a newbie i do not know how to pass the image as an attachment to this object array.
Thank you sir.

15

hello,
have you done your application with local storage and uploading to remote server?
if yes share with me i’m also doing the same.

thanks

16

Are you referring to me?

17

how to convert blob to basic64
i covert image into blob and stored in sqlite db. i’m getting a blob object buti do not know how to convert blob to image
plse help me

18

Please owolabi where you able to achieve this am facing a similar problem

19

As mentioned in above posts , Do not use local storage to store images.