# Ignition Image view in perspective

**URL:** <https://forum.inductiveautomation.com/t/ignition-image-view-in-perspective/86757>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [March 4, 2024, 2:18pm UTC](https://forum.inductiveautomation.com/t/ignition-image-view-in-perspective/86757 "2024-03-04T14:18:08Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tokyo\_mht](https://avatars.discourse-cdn.com/v4/letter/t/c37758/32.png) [@Tokyo\_mht](https://forum.inductiveautomation.com/u/Tokyo_mht)\
**Post date:** [March 4, 2024, 2:18pm UTC](https://forum.inductiveautomation.com/t/ignition-image-view-in-perspective/86757/1 "2024-03-04T14:18:08Z")

</div>

I Used file Upload component in perspective, after uploading in the same view, if I click on preview button it should show uploaded image .I tried passing

```auto
event.file.getBytes() 

```

data to Image source, but I am getting error. How I can solve this issue. Thanks in advance

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [March 4, 2024, 4:34pm UTC](https://forum.inductiveautomation.com/t/ignition-image-view-in-perspective/86757/2 "2024-03-04T16:34:48Z")

</div>

Where are you putting the uploaded file? (In the onFileReceived event.)

If you are putting it in a file, you would use the WebDev module to serve it back out to clients.

If you are putting it in a database as a blob, you can use the WebDev module, but could also use my free Blob Server module.

---

<div class="post-metadata">

**Author:** ![Tokyo\_mht](https://avatars.discourse-cdn.com/v4/letter/t/c37758/32.png) [@Tokyo\_mht](https://forum.inductiveautomation.com/u/Tokyo_mht)\
**Post date:** [March 4, 2024, 5:23pm UTC](https://forum.inductiveautomation.com/t/ignition-image-view-in-perspective/86757/3 "2024-03-04T17:23:29Z")

</div>

yes, onFileReceived event. I am assigning it to some param .When I use that param it will return byteArray ..I am not getting ,how to bind that value to Image viewer source

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [March 4, 2024, 5:27pm UTC](https://forum.inductiveautomation.com/t/ignition-image-view-in-perspective/86757/4 "2024-03-04T17:27:54Z")

</div>

> [@Tokyo\_mht](#):
>
> assigning it to some param

You mean a Perspective property? That breaks byte arrays, as Perspective needs to JSONify everything.

Or you could Base64 encode it, and present with a data url. Not very efficient, but should work.

---

<div class="post-metadata">

**Author:** ![Tokyo\_mht](https://avatars.discourse-cdn.com/v4/letter/t/c37758/32.png) [@Tokyo\_mht](https://forum.inductiveautomation.com/u/Tokyo_mht)\
**Post date:** [March 4, 2024, 5:41pm UTC](https://forum.inductiveautomation.com/t/ignition-image-view-in-perspective/86757/5 "2024-03-04T17:41:26Z")

</div>

yes perspective property.(self.view.param.imageString)

---

<div class="post-metadata">

**Author:** ![Tokyo\_mht](https://avatars.discourse-cdn.com/v4/letter/t/c37758/32.png) [@Tokyo\_mht](https://forum.inductiveautomation.com/u/Tokyo_mht)\
**Post date:** [March 4, 2024, 5:44pm UTC](https://forum.inductiveautomation.com/t/ignition-image-view-in-perspective/86757/6 "2024-03-04T17:44:08Z")

</div>

I tried this  
value = self.view.param.imageStream  
b64Image = "data:imagef;base64,%s"%value  
return b64Image

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 4, 2024, 6:31pm UTC](https://forum.inductiveautomation.com/t/ignition-image-view-in-perspective/86757/7 "2024-03-04T18:31:42Z")

</div>

> [@Tokyo\_mhpost:6](#):
>
> `"data:imagef;base64,%s" % value`

How can you use the modulo operator on a string?

Tip: please format code with the \</\> button.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [March 4, 2024, 6:33pm UTC](https://forum.inductiveautomation.com/t/ignition-image-view-in-perspective/86757/8 "2024-03-04T18:33:08Z")

</div>

> [@Transistor](#):
>
> modulo operator on a string?

Standard python string interpolation (old school). (I still use it everywhere--the "C" style placeholders are much closer to java implementations than the `.format()` method's curly braces.)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 4, 2024, 6:33pm UTC](https://forum.inductiveautomation.com/t/ignition-image-view-in-perspective/86757/9 "2024-03-04T18:33:49Z")

</div>

Yes, I've just looked it up. Is it appropriate in this case?

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [March 4, 2024, 6:35pm UTC](https://forum.inductiveautomation.com/t/ignition-image-view-in-perspective/86757/10 "2024-03-04T18:35:37Z")

</div>

> [@Transistor](#):
>
> it appropriate in this case?

Yes, if the onFileReceived event stored the content in base64 (and it has to be in that event, not later).

---

<div class="post-metadata">

**Author:** ![Tokyo\_mht](https://avatars.discourse-cdn.com/v4/letter/t/c37758/32.png) [@Tokyo\_mht](https://forum.inductiveautomation.com/u/Tokyo_mht)\
**Post date:** [March 5, 2024, 7:09am UTC](https://forum.inductiveautomation.com/t/ignition-image-view-in-perspective/86757/11 "2024-03-05T07:09:29Z")

</div>

could you give one example .

---

<div class="post-metadata">

**Author:** ![Tokyo\_mht](https://avatars.discourse-cdn.com/v4/letter/t/c37758/32.png) [@Tokyo\_mht](https://forum.inductiveautomation.com/u/Tokyo_mht)\
**Post date:** [March 5, 2024, 7:14am UTC](https://forum.inductiveautomation.com/t/ignition-image-view-in-perspective/86757/14 "2024-03-05T07:14:07Z")

</div>

If I assign it to some variable it will change it's format.So how I can encode it's value..

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [March 5, 2024, 12:53pm UTC](https://forum.inductiveautomation.com/t/ignition-image-view-in-perspective/86757/15 "2024-03-05T12:53:24Z")

</div>

I would use java's [Base64](https://docs.oracle.com/en/java/javase/11/docs/api/java.base/java/util/Base64.html) static methods to encode in the onFileReceived event, and assign the encoded form (which is a string) to the Perspective image property. As a string, it won't be garbled by Perspective.

---

<div class="post-metadata">

**Author:** ![Tokyo\_mht](https://avatars.discourse-cdn.com/v4/letter/t/c37758/32.png) [@Tokyo\_mht](https://forum.inductiveautomation.com/u/Tokyo_mht)\
**Post date:** [March 5, 2024, 1:15pm UTC](https://forum.inductiveautomation.com/t/ignition-image-view-in-perspective/86757/16 "2024-03-05T13:15:21Z")

</div>

yes thanks,it's working now

```auto
import base64
self.view.params.imageStream = base64.b64encode(imageStream)

```

---

<div class="post-metadata">

**Author:** ![jespinmartin1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jespinmartin1/32/57175_2.png) [@jespinmartin1](https://forum.inductiveautomation.com/u/jespinmartin1)\
**Post date:** [March 5, 2024, 1:34pm UTC](https://forum.inductiveautomation.com/t/ignition-image-view-in-perspective/86757/17 "2024-03-05T13:34:24Z")

</div>

That would crash your designer for large images. In runtime, it should be ok. Store them in globals, the trade back it to properly managed persistency and ideally delete images ones used or timeout cycle.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [March 5, 2024, 1:41pm UTC](https://forum.inductiveautomation.com/t/ignition-image-view-in-perspective/86757/18 "2024-03-05T13:41:44Z")

</div>

> [@jespinmartin1](#):
>
> Store them in globals

That's a terrible idea, as is, as that becomes a memory leak if you don't clean up after yourself very thoroughly. Such a bad idea that I created the [viewVarMap()](https://www.automation-pros.com/toolkit/doc/scripting.html#viewvarmap) set of functions to hold java/jython objects in context, with automatic cleanup. It is part of my (free) Integration Toolkit module.

---

<div class="post-metadata">

**Author:** ![jespinmartin1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jespinmartin1/32/57175_2.png) [@jespinmartin1](https://forum.inductiveautomation.com/u/jespinmartin1)\
**Post date:** [March 5, 2024, 1:44pm UTC](https://forum.inductiveautomation.com/t/ignition-image-view-in-perspective/86757/19 "2024-03-05T13:44:37Z")

</div>

I mentioned the trade back sir, for a good developer this should not be a terrible idea.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [March 5, 2024, 1:59pm UTC](https://forum.inductiveautomation.com/t/ignition-image-view-in-perspective/86757/20 "2024-03-05T13:59:06Z")

</div>

> [@Tokyo\_mht](#):
>
> `import base64`

Yeah, no. That's the python standard library. Not recommended in jython for any technology that java already has. Put this in a project library script:

```auto
from java.util import Base64

commonB64encoder = Base64.getEncoder()

def bytesToB64(byteArray):
	return commonB64encoder.encodeToString(byteArray)

```

Then, your `onFileReceived` event can just do this:

```auto
	self.view.params.imageStream = someScriptModule.bytesToB64(imageStream)

```

This would be much more efficient.

---

<div class="post-metadata">

**Author:** ![Tokyo\_mht](https://avatars.discourse-cdn.com/v4/letter/t/c37758/32.png) [@Tokyo\_mht](https://forum.inductiveautomation.com/u/Tokyo_mht)\
**Post date:** [March 6, 2024, 6:52am UTC](https://forum.inductiveautomation.com/t/ignition-image-view-in-perspective/86757/21 "2024-03-06T06:52:39Z")

</div>

[quote="Tokyo\_mht, post:16, topic:86757"]  
This works ,Thanks .But it won't work for large MB if i assign it to view param. If I use global variable it will work.