Upload Button for images in Web app

lmh

Dear all,
in the web app I'm developing the user is supposed to upload an image via a input element:

<label for="file">Upload</label>
<input type="file"  accept="image/*" name="image" id="file"  onchange="loadFile(event)">

This then prompts the JS function

var loadFile = function(event) {
  var image = document.getElementById('pic');
  image.src = URL.createObjectURL(event.target.files[0]);
};

This works in all the browsers on my ubuntu desktop but not in the app itself on my phone. This screen opens, when I click the 'upload button'

Any idea what the problem is here would be much appreciated...

kugiigi

@lmh How are you creating the webapp? Are you embedding a webview in QML?
If yes, you can check here. Content hub implementation is in here.

lmh

@kugiigi Thanks for the links. Will have a look at it tonight. I am coding in html/css/js and using clickable to create the ubuntu touch package/app. I think I found another solution here

https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

lmh

I have solved the problem. The issues had nothing to do with my code. Just in case it helps anyone else: In the file

yourappname.apparmor

(which is automatically generated by clickable) you need to add the policy group "picture_files_read". I assumed "content_exchange" would suffice but it doesn't. So this issue is solved