Dealing with uploaded assets in Rails (backend) in a Ionic (Cordova) App

Question

I have an app built in Ionic Framework, and the backend of this app has a Rails app administrator panel, with content editor, user control, image uploads (using Carrierwave).

I made a API that returns the concise information to Ionic app. And isolates the Rails admin panel in a private network. I get fully posts contents, relations from the another objects, and sends to Ionic app via JSON.

But I don't how properly deals with uploaded (via Carrierwave) assets to show the images in my Ionic app.

Thanks,

Answer 1

then first you have to add 3 plugins which are below

1. cordova plugin add org.apache.cordova.file-transfer

2. cordova plugin add org.apache.cordova.file

3. cordova plugin add org.apache.cordova.camera

And copy below code and pest into your controller to pick image from gallery and upload on server

$scope.editProfileImgGallary = function() {
    navigator.camera.getPicture(uploadEditProfilePhotosImage, onFailEditProfilePhoto, {
      targetWidth: 512,
      targetHeight: 512,
      quality: 40,
      correctOrientation: true,
      allowEdit: true,
      destinationType: navigator.camera.DestinationType.FILE_URI,
      sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
    });
  }

  function onFailEditProfilePhoto(message) {
    // alert('Failed because: ' + message);
  }

  function uploadEditProfilePhotosImage(imageURI) {
    // $ionicLoading.show({
    //   template: '<p>Loading...</p><ion-spinner icon="bubbles"></ion-spinner>'
    // });
    console.log(imageURI);
    // var img = document.getElementById('userEditProfileImg');
    // img.src = imageURI;
    var options = new FileUploadOptions();
    options.fileKey = "file";
    options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
    options.mimeType = "image/jpeg";
    var ft = new FileTransfer();
    ft.upload(imageURI, encodeURI('uploadimg.php'), winEditProfilePhotos, failEditProfilePhotos, options);
  }

  function winEditProfilePhotos(r) {
    console.log("Code = " + r.responseCode);
    console.log("Response = " + r.response);
    console.log("Sent = " + r.bytesSent);
    // $ionicLoading.hide();
  }

  function failEditProfilePhotos(error) {
    console.log("upload error source " + error.source);
    console.log("upload error target " + error.target);
    // $ionicLoading.hide();
    // var alertPopup = $ionicPopup.alert({
    //   title: 'Uh Oh!',
    //   template: 'You Get Some Error Please Try Again..'
    // });
  }

And copy bellow code and pest into your HTML page onClick Event

<div ng-click="editProfileImgGallary();" ></div>