title: How to access external storage from WebView's HTML page?
body: <p>I'm writing an application with a WebView frontend. I'd like to allow users to take pictures and then display them embedded into HTML.</p>
  <p>So far I managed to implement taking pictures and storing them in the external storage, but I cant figure out how to access them from HTML, e.g. via the <code>&lt;img/&gt;</code> tag.</p>
  <p>Steps I did already:</p>
  <ol>
  <li><p>Created an externally stored file:</p>
  <pre><code>private fun createImageFile(): File {
      val storageDir = getExternalFilesDir(Environment.DIRECTORY_PICTURES)
      val file = File(storageDir, &quot;pic.jpg&quot;)
      file.createNewFile()
      return file
  }
  </code></pre>
  </li>
  <li><p>Added necessary permission declarations in manifest:</p>
  <pre><code> &lt;uses-permission android:name=&quot;android.permission.WRITE_EXTERNAL_STORAGE&quot;/&gt;
   &lt;uses-permission android:name=&quot;android.permission.READ_EXTERNAL_STORAGE&quot;/&gt;
  </code></pre>
  </li>
  <li><p>Since those are dangerous permissions, I made sure they're granted at runtime (omitting code because I've double checked it works).</p>
  </li>
  <li><p>Exposed the file uri via <code>@JavascriptInterface</code> to my HTML page:</p>
  <pre><code> @JavascriptInterface
   fun getSelfiePath() : String {
        return file.toURI().toString()
   }
  </code></pre>
  </li>
  <li><p>I referenced the uri from my <code>&lt;img/&gt;</code> tag:</p>
  <pre><code> function populatePicture() {
       let picDiv = document.getElementById(&quot;pic&quot;)
       picDiv.innerHTML = '&lt;img src=&quot;' + controller.getPicturePath() + '&quot; /&gt;'
       // getPicturePath() returns path in the format of: 
       // /storage/emulated/0/Android/data/{package}/files/Pictures/pic.jpg
   }
  </code></pre>
  </li>
  </ol>
  <p>I realize all of this is not what you'd call a minimal working example but I found it really hard to provide one, since the problems spans over many &quot;domains&quot;.</p>
  <p>I've tried many different approaches with the URI, such as prepending it with <code>file:///</code>, for instance, but none of it worked. What's confusing me even more, is that I cant easily access compile-time resources this way, but for one placed in external storage, it simply does not work.</p>
  <p>What is the correct approach? I feel like I'm missing something when it comes to:</p>
  <ol>
  <li>Accessing external storage from HTML.</li>
  </ol>
  <p>or</p>
  <ol start="2">
  <li>Correct use of methods to generate the URI string.</li>
  </ol>