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

Are you able to see the file using any file explorers? In many cases, application specific data is not accessible outside application. Can you try storing the image externalRootDirectory and try once? — Gandhi, May 09 '16 at 10:31
@BohdanZ - Hi, well actually I just found out that this happens when using livereload option i.e - "ionic run android -lc" . In this case looks like the plugin makes the search in the actual filesystem of the computer and not the device.. so in order to avoid that I am just running it without the -lc option ... which is not optimal and we loose chrome inspect support but I couldn't find a way of bypassing the problem using the -lc option. — groo, Jul 18 '16 at 20:03
@MarcosMaia yes, I also found out it and used the same solution, but this solution is not good to use. Thank you for the response. — BohdanZ, Jul 19 '16 at 11:13
I do not use ionic but I still see this error with cordova android 6.3.0 using plain cordova project.Any idea? — manjunath kallannavar, Jul 10 '18 at 09:33
Try this: this question will help you. https://stackoverflow.com/questions/53395712/ionic-angular-4-0-0-beta-13-not-allowed-to-load-local-resource-with-webview/53414202#53414202 — Ashish Patidar, Nov 22 '18 at 06:41
This solution worked for me https://stackoverflow.com/a/51676605/8031298 — sachin rathod, Dec 27 '20 at 18:00

score 30 · Answer 1 · answered Oct 10 '16 at 19:52

30

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

Try running in normal mode

answered Oct 10 '16 at 19:52

alexislg

1,018
13
20

8

if you check the comments on my question above you'll notice that we concluded this already, the problem is that this is not a proper answer or fix to the problem, I would like to have this working and still be able to properly use -lc option and/or be able to use chrome inspect. – groo Oct 11 '16 at 13:52

score 3 · Answer 2 · answered Jan 29 '19 at 08:44

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

answered Jan 29 '19 at 08:44

lucbonnin

235
2
9

I'm using ionic webview 2.4.1, and this solution worked for me. – Dan Sterrett Apr 10 '19 at 18:59
This solution worked for me very well on ios, it took me two days to get to this answer, – Kalyan Pradhan Feb 28 '22 at 03:09

score 2 · Answer 3 · answered Dec 02 '17 at 01:22

2

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.

answered Dec 02 '17 at 01:22

Maxim Zubarev

2,403
2
29
48

I think this answer might apply to me. What’s the way to solve it? – andrewf Dec 22 '17 at 01:55

score 1 · Answer 4 · answered Sep 13 '17 at 15:41

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

Sampath · Answer 5 · 2018-12-07T15:34:36.493

0

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.

edited Dec 07 '18 at 15:34

answered Dec 07 '18 at 15:15

Sampath

63,341
64
307
441

Ionic Cordova FileUpload error: Not allowed to load local resource

5 Answers5

Linked