Ionic Cordova FileUpload error: Not allowed to load local resource

Question

I am new to Ionic and I am trying to upload an image taken from camera that is stored in Android filesystem:

var ft = new FileTransfer();
console.log('Uploading: ' + fileURL);
ft.upload(fileURL,
  encodeURI("http://192.168.192.62:3000/api/meals/picture"),
  pictureUploaded,
  function(error) {
    console.err(error);
    $ionicLoading.show({template: 'Ooops error uploading picture...'});
    setTimeout(function(){$ionicLoading.hide();}, 3000);
  },
  options);
  
var pictureUploaded = function() {
  console.log('uploaded!');
  $ionicLoading.hide();
};

fileUrl is pointing to an existent image: file:///data/data/com.ionicframework.nutrilifemobile664547/files/Q2AtO1462636767466.jpg

In chrome://inspect/#devices console I get the following error and it looks like because of the error the FileOptions are also not properly sent, this is the error (Not allowed to load local resource):

Cordova version: 6.1.1
Ionic version: 1.7.14

Answer 1

This happens when you use the "livereload" option with Ionic.

Try running in normal mode

Answer 2

With ionic webview >3.x, you have to use convertFileSrc() method. For example if you have a myURL local variable such as file:// or /storage.

let win: any = window; // hack ionic/angular compilator
var myURL = win.Ionic.WebView.convertFileSrc(myURL);