# Webview \<\> Thunkable Interations and Constraints

**URL:** <https://community.thunkable.com/t/webview-thunkable-interations-and-constraints/1742322>\
**Category:** Questions about Thunkable X\
**Created:** [February 19, 2022, 2:03am UTC](https://community.thunkable.com/t/webview-thunkable-interations-and-constraints/1742322 "2022-02-19T02:03:54Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![collabor8te.projectq](https://avatars.discourse-cdn.com/v4/letter/c/5e9695/32.png) [@collabor8te.projectq](https://community.thunkable.com/u/collabor8te.projectq)\
**Post date:** [February 19, 2022, 2:03am UTC](https://community.thunkable.com/t/webview-thunkable-interations-and-constraints/1742322/1 "2022-02-19T02:03:54Z")

</div>

Hi,

I am exploring using a web viewer as the primary element of an app but want to be able to use some native functionality that Thunkable exposes. I have come across this in order to achieve 2 way comms between the WV and Thunkable:

> [@\[Solved\] Question about web viewer receives message](https://community.thunkable.com/t/solved-question-about-web-viewer-receives-message/569039/2):
>
> You webpage needs include: \<script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js" type="text/javascript"\>\</script\> ThunkableWebviewerExtension.postMessage('hello world'); You can find instructions and details here:

That seems great and the demo projects work well. My questions are:

1. If I wanted to take a photo in the native app, would I be able to pass that as the ‘message’ to the web view page ? If so, how ?
2. Same comment goes for a video
3. Any other constraints or considerations I should be aware of at all ?

I am also exploring having local html files but I believe there is (still valid ?) an issue with not being able to load assets locally ? (see below):

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/d/3dd080e5e07da3d14a0f93e5f00cded3c267f9c1.png)

FROM: [Thunkable X - local path for WebViewer for Android - Thunkable Discuss - Community](https://community.thunkable.com/t/thunkable-x-local-path-for-webviewer-for-android/76432/30)

Thanks

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [February 19, 2022, 2:46am UTC](https://community.thunkable.com/t/webview-thunkable-interations-and-constraints/1742322/2 "2022-02-19T02:46:30Z")

</div>

> [@collabor8te.projectq](#):
>
> an issue with not being able to load assets locally

Yes, this issue is still not fixed yet.

> [@collabor8te.projectq](#):
>
> If I wanted to take a photo in the native app, would I be able to pass that as the ‘message’ to the web view page ? If so, how ?

You need to specify what you mean by take a photo or video?  
Are you saving it to `Cloudinary` for example? If yes, then you will have a URL link to the saved photo/video which you need to pass to your HTML page.

See my demo for loading an image by selecting it from the HTML and then loading it to the native app which is the opposite of what you described but will give you the understanding of the mechanism.  
[https://x.thunkable.com/projectPage/61f68431c3761001dba12df1](https://x.thunkable.com/projectPage/61f68431c3761001dba12df1)

> [@collabor8te.projectq](#):
>
> Any other constraints or considerations I should be aware of at all ?

The `Web Viewer` is an `iframe HTML element` and therefore all considerations and constrains of `iframe` will hold true for the `Web Viewer` component. A major constraint is that some sites, for security reasons, does not allow executing their pages from `iframe` element which is referred to as `CORS policy`.

---

<div class="post-metadata">

**Author:** ![collabor8te.projectq](https://avatars.discourse-cdn.com/v4/letter/c/5e9695/32.png) [@collabor8te.projectq](https://community.thunkable.com/u/collabor8te.projectq)\
**Post date:** [February 19, 2022, 6:41am UTC](https://community.thunkable.com/t/webview-thunkable-interations-and-constraints/1742322/3 "2022-02-19T06:41:47Z")

</div>

Thanks @muneer I was concerned about the max size of the parameter to be able to pass between the two.

In answer to your question - no I’m not using Cloudinary - I have my own custom backend that all my stuff goes to / interacts with and it has a fairly decent api 🙂

Really think the local assets issue should be fixed tbh.

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [February 19, 2022, 8:06am UTC](https://community.thunkable.com/t/webview-thunkable-interations-and-constraints/1742322/4 "2022-02-19T08:06:47Z")

</div>

> [@collabor8te.projectq](#):
>
> it has a fairly decent api 🙂

If you have API service already setup then you would use `Web API` component instead of the `Web Viewer`.

Any how, if you tested my demo app you will see that you can upload the image file to the app with nearly any size.

---

<div class="post-metadata">

**Author:** ![collabor8te.projectq](https://avatars.discourse-cdn.com/v4/letter/c/5e9695/32.png) [@collabor8te.projectq](https://community.thunkable.com/u/collabor8te.projectq)\
**Post date:** [February 19, 2022, 8:14am UTC](https://community.thunkable.com/t/webview-thunkable-interations-and-constraints/1742322/5 "2022-02-19T08:14:58Z")

</div>

Thanks @muneer but that depends. I did consider that and in that scenario, I’d have to upload via webapi, get a url, pass that to the webviewer, it would then download and display the image.

Alternatively I could pass the image to the web viewer for immediate display and upload from there.

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [February 19, 2022, 1:57pm UTC](https://community.thunkable.com/t/webview-thunkable-interations-and-constraints/1742322/6 "2022-02-19T13:57:03Z")

</div>

@collabor8te.projectq what Have you tried? I imagine it would pass a file path but idk if that would render an image. I’ve not tried this, tbh 🤷‍♂️

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [February 19, 2022, 2:38pm UTC](https://community.thunkable.com/t/webview-thunkable-interations-and-constraints/1742322/7 "2022-02-19T14:38:04Z")

</div>

> [@jared](#):
>
> but idk if that would render an image.

It shouldn’t. This would lead to a high security concern.

---

<div class="post-metadata">

**Author:** ![collabor8te.projectq](https://avatars.discourse-cdn.com/v4/letter/c/5e9695/32.png) [@collabor8te.projectq](https://community.thunkable.com/u/collabor8te.projectq)\
**Post date:** [February 19, 2022, 9:40pm UTC](https://community.thunkable.com/t/webview-thunkable-interations-and-constraints/1742322/8 "2022-02-19T21:40:06Z")

</div>

I was intending to Base64 the image (still possible in Stp correct ?) and sending that to the page…

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [February 19, 2022, 11:32pm UTC](https://community.thunkable.com/t/webview-thunkable-interations-and-constraints/1742322/9 "2022-02-19T23:32:58Z")

</div>

If not now, @collabor8te.projectq, it should be soonish. We’re working hard to release a component that will reliably do this for us! (Convert files to base64)

---

<div class="post-metadata">

**Author:** ![collabor8te.projectq](https://avatars.discourse-cdn.com/v4/letter/c/5e9695/32.png) [@collabor8te.projectq](https://community.thunkable.com/u/collabor8te.projectq)\
**Post date:** [February 20, 2022, 12:01am UTC](https://community.thunkable.com/t/webview-thunkable-interations-and-constraints/1742322/10 "2022-02-20T00:01:52Z")

</div>

Thanks @jared I was of the opinion that StP did it but there was (is) an issue with that functionality in DnD ?

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [February 20, 2022, 10:17am UTC](https://community.thunkable.com/t/webview-thunkable-interations-and-constraints/1742322/11 "2022-02-20T10:17:02Z")

</div>

> [@collabor8te.projectq](#):
>
> StP did it but there was (is) an issue with that functionality in DnD

At the moment only the `Canvas image` is Base64 but other images (background pictures and image component) are not.

However, if you have a Base64 URI then the `image` component will display it correctly.

---

<div class="post-metadata">

**Author:** ![collabor8te.projectq](https://avatars.discourse-cdn.com/v4/letter/c/5e9695/32.png) [@collabor8te.projectq](https://community.thunkable.com/u/collabor8te.projectq)\
**Post date:** [February 21, 2022, 9:51am UTC](https://community.thunkable.com/t/webview-thunkable-interations-and-constraints/1742322/12 "2022-02-21T09:51:12Z")

</div>

Thanks @muneer but I was referring to being able to convert the image to base64 to send to the web page. That not possible ?

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [February 21, 2022, 11:06am UTC](https://community.thunkable.com/t/webview-thunkable-interations-and-constraints/1742322/13 "2022-02-21T11:06:06Z")

</div>

> [@collabor8te.projectq](#):
>
> That not possible ?

At the moment not possible.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [May 22, 2022, 11:06am UTC](https://community.thunkable.com/t/webview-thunkable-interations-and-constraints/1742322/14 "2022-05-22T11:06:09Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.