Blog

This short tutorial will show you how to save images from your device camera into Appery.io database.

1. Create a new Ionic project and database.
2. Add the Camera Service plug-in and File Upload App plug-in into the project by going to Project > CREATE NEW > From Plug-in, in the Builder.
3. Create a page CameraPage with 2 buttons Camera and Upload with corresponding attributes and the component Image to display the result:
   
4. On the Scope tab add this code for the Camera button:

   var requestData = {};
   Apperyio.get("Camera_getPicture")(requestData).then(
   function(success){
       $scope.im.image = success.image;
       $scope.$apply(); 
   },
   function(error){
   });

   

5. Then, add this code for the Upload button:

   function dataURLtoFile(dataurl, filename) {
   var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
   bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
   while(n--){
   u8arr[n] = bstr.charCodeAt(n);
   }
   return new File([u8arr], filename, {type:mime});
   }
   
   var filepointer = dataURLtoFile($scope.im.image, 'test.png');
   $scope.files.push({filename:"test.png", filepointer: filepointer});
   
   
   if ($scope.files.length === 0) {
   alert('No file for upload');
   return;
   }
   
   var requestData = Apperyio.EntityAPI('FileDB__files_upload_service.request');
   var user_scope = $scope.user;
   var files_scope = $scope.files;
   var formData = new FormData();
   requestData.data = _.pluck($scope.files, 'filepointer');
   
   Apperyio.get("FileDB__files_upload_service")(requestData).then(
   
   function(success){
   alert('All files has been successfully uploaded.');
   },
   function(error){
   
   },
   function(notify){
   
   });

6. Finally, enter tour database_id and master_key in  FileDB_settings:

And, that’s it! (Please remember that this app should be tested on a real device.)