Ionic Cordova FileUpload error: Not allowed to loa

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

Any ideas? I've been stuck with this error for a while.

Answer 1

Another possible reason is that you have a webview plugin installed (like https://github.com/ionic-team/cordova-plugin-ionic-webview or just https://github.com/apache/cordova-plugin-wkwebview-engine). Also this will not allow to use cdvfile:// protocol as well.

Answer 2

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

Try running in normal mode

Answer 3

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);

Answer 4

It might be too late but... you could convert native path to blob using File then convert blob to URL using URL.createObjectURL(blob) and passing/setting as src to your html element. This is unnecessary for production environment but you could use it for development with -lc. It might work

Answer 5

07-Dec-2018

This is the version where it works for me on Ionic 3.9.2 app.

Remove the latest version of webview and then:

i.e. ionic cordova plugin add cordova-plugin-ionic-webview@1.2.1

https://github.com/ionic-team/cordova-plugin-ionic-webview/releases/tag/v1.2.1

Note: This version works fine with normalizeURL() method.