# Upload Component and Image handling

**URL:** <https://forum.inductiveautomation.com/t/upload-component-and-image-handling/85836>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [February 16, 2024, 2:01pm UTC](https://forum.inductiveautomation.com/t/upload-component-and-image-handling/85836 "2024-02-16T14:01:07Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![fabio.gambarin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/fabio.gambarin/32/20449_2.png) [@fabio.gambarin](https://forum.inductiveautomation.com/u/fabio.gambarin)\
**Post date:** [February 16, 2024, 2:01pm UTC](https://forum.inductiveautomation.com/t/upload-component-and-image-handling/85836/1 "2024-02-16T14:01:07Z")

</div>

Hello All,  
I have a problem handling image from file upload in perspective.

Actually I can upload the file and save on local disk of the gateway.  
What I'm trying to do is to display a preview of the image before uploading it.

The image is stored as byte array but I can not find out how to show it ron an image component.  
THere is a way to do so?

Thanks in advance

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [February 16, 2024, 2:22pm UTC](https://forum.inductiveautomation.com/t/upload-component-and-image-handling/85836/2 "2024-02-16T14:22:44Z")

</div>

> [@fabio.gambarin](#):
>
> What I'm trying to do is to display a preview of the image before uploading it.

Perhaps I'm missing something obvious, but how are you going to display a preview from a file you don't have access to prior to gaining access to it?

Do you mean you want to preview it prior to saving?

---

<div class="post-metadata">

**Author:** ![Adarsh\_K](https://avatars.discourse-cdn.com/v4/letter/a/ee7513/32.png) [@Adarsh\_K](https://forum.inductiveautomation.com/u/Adarsh_K)\
**Post date:** [February 16, 2024, 3:07pm UTC](https://forum.inductiveautomation.com/t/upload-component-and-image-handling/85836/3 "2024-02-16T15:07:26Z")

</div>

> [@fabio.gambarin](#):
>
> d out how to sh

I too was looking for this !!!,  
Perhaps I found that image component's source object can handle base69 byte array to display image .  
But when you try to read image byte array base69 value from the upload component and push it to any editor object it is getting converted to int array again .  
I even tried converting using python and push still did not work !!!

---

<div class="post-metadata">

**Author:** ![fabio.gambarin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/fabio.gambarin/32/20449_2.png) [@fabio.gambarin](https://forum.inductiveautomation.com/u/fabio.gambarin)\
**Post date:** [February 19, 2024, 9:30am UTC](https://forum.inductiveautomation.com/t/upload-component-and-image-handling/85836/4 "2024-02-19T09:30:22Z")

</div>

Yes,  
I want to show the image prior to save as a file,  
is that possible?  
I found a lot of info on how to convert byte array to image but I can not get it to work

---

<div class="post-metadata">

**Author:** ![fabio.gambarin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/fabio.gambarin/32/20449_2.png) [@fabio.gambarin](https://forum.inductiveautomation.com/u/fabio.gambarin)\
**Post date:** [February 19, 2024, 2:07pm UTC](https://forum.inductiveautomation.com/t/upload-component-and-image-handling/85836/5 "2024-02-19T14:07:03Z")

</div>

In the meantime..

I tried to store the image as a temp file and all works fine.  
The only dropdown is that I can't delete or overwrite the generated file from the gateway.  
file appear to be opened on ignition.  
The only way to make it work is get a new file name every time.

Any suggestion or best practice?

---

<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:** [February 19, 2024, 2:53pm UTC](https://forum.inductiveautomation.com/t/upload-component-and-image-handling/85836/6 "2024-02-19T14:53:47Z")

</div>

1. Use a database to hold the image file, serve it for display with my Blob Server module, and delete it from the DB if not accepted permanently.

2. Use Ignition's WebDev module to serve temporary and/or permanent files from a gateway folder that isn't tightly controlled by Jetty.

(Ignition uses the Jetty java webserver technology, and it takes permanently control of any file placed in its primary folder. Once server to any client, those files cannot be deleted without a gateway restart. That you can serve files to clients from that folder is an "accidental" feature, and is not supported by IA at all.)

---

<div class="post-metadata">

**Author:** ![fabio.gambarin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/fabio.gambarin/32/20449_2.png) [@fabio.gambarin](https://forum.inductiveautomation.com/u/fabio.gambarin)\
**Post date:** [February 21, 2024, 8:28am UTC](https://forum.inductiveautomation.com/t/upload-component-and-image-handling/85836/7 "2024-02-21T08:28:47Z")

</div>

> [@pturmel](#):
>
> (Ignition uses the Jetty java webserver technology, and it takes permanently control of any file placed in its primary folder. Once server to any client, those files cannot be deleted without a gateway restart. That you can serve files to clients from that folder is an "accidental" feature, and is not supported by IA at all.)

Thanks for the reply.

Actually I am not usingthe database to store the image since for the application we do have an instance of MS SQL EXPRESS that has some limit.

Actually I am storing temporary the images on a json object that I made on the gateway script.  
I can then show the preview converting the byte array to base64.

Now I am trying to figure out why sometime the gateway VM go at 100% on CPU when I do that.  
and all freeze for a while. This is strange because this is not a CPU related task  
Any hint?

---

<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:** [February 21, 2024, 12:39pm UTC](https://forum.inductiveautomation.com/t/upload-component-and-image-handling/85836/8 "2024-02-21T12:39:01Z")

</div>

> [@fabio.gambarin](#):
>
> and all freeze for a while

Show all of your scripts.

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [February 21, 2024, 12:43pm UTC](https://forum.inductiveautomation.com/t/upload-component-and-image-handling/85836/9 "2024-02-21T12:43:51Z")

</div>

> [@fabio.gambarin](#):
>
> This is strange because this is not a CPU related task

What makes you say this? Just because it involves graphics doesn't mean its automatically deferred to the GPU.

---

<div class="post-metadata">

**Author:** ![fabio.gambarin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/fabio.gambarin/32/20449_2.png) [@fabio.gambarin](https://forum.inductiveautomation.com/u/fabio.gambarin)\
**Post date:** [February 21, 2024, 1:09pm UTC](https://forum.inductiveautomation.com/t/upload-component-and-image-handling/85836/10 "2024-02-21T13:09:41Z")

</div>

> [@lrose](#):
>
> What makes you say this? Just because it involves graphics doesn't mean its automatically deferred to the GPU.

Because I'm only moving the image to a project library.

---

<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:** [February 21, 2024, 1:42pm UTC](https://forum.inductiveautomation.com/t/upload-component-and-image-handling/85836/11 "2024-02-21T13:42:16Z")

</div>

> [@fabio.gambarin](#):
>
> the image to a project library.

How? It matters. Show your code.

---

<div class="post-metadata">

**Author:** ![fabio.gambarin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/fabio.gambarin/32/20449_2.png) [@fabio.gambarin](https://forum.inductiveautomation.com/u/fabio.gambarin)\
**Post date:** [February 21, 2024, 2:24pm UTC](https://forum.inductiveautomation.com/t/upload-component-and-image-handling/85836/12 "2024-02-21T14:24:51Z")

</div>

This is the onFileReceived event:

```auto

	fileName = event.file.name
	
	image={}
	image['path_short']='\\CommentsImage\\' + fileName
	image['path']='D:\\Program Files\\Inductive Automation\\Ignition-windows-64-8.1.12\\webserver\\webapps\\main' + image['path_short']	
	image['bytes']=event.file.getBytes()

	self.view.custom.imgCounter=self.view.custom.imgCounter+1
	
	if not self.session.props.address in SM_Image.TempImage:
		SM_Image.TempImage[self.session.props.address]=[]
	SM_Image.TempImage[self.session.props.address].append(image)

	self.view.custom.image.append(image)
	
	payload={}
	system.perspective.sendMessage('UpdatePicture', payload)
	

```

this is the message that update the istances:

```auto
header='data:imagef;base64,'
list=[]
system.util.getLogger('UpdatePicture').info(Updating list length: ' +str(len(SM_Image.TempImage[self.session.props.address])))
for element in SM_Image.TempImage[self.session.props.address]:
      # converting to base 64
      import base64
      binary_file_data = element['bytes']
      base64_encoded_data = header + base64.b64encode(binary_file_data)= 
 
      element['Image']=base64_encoded_data

      list.append(element)
system.util.getLogger('UpdatePicture').info('Updated list')
self.props.instances= list

```

---

<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:** [February 21, 2024, 2:36pm UTC](https://forum.inductiveautomation.com/t/upload-component-and-image-handling/85836/13 "2024-02-21T14:36:48Z")

</div>

> [@fabio.gambarin](#):
>
> `SM_Image.TempImage`

Where are you clearing this out? If not cleaned up, it will grow until you run out of memory. Especially as sessions die.

---

<div class="post-metadata">

**Author:** ![fabio.gambarin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/fabio.gambarin/32/20449_2.png) [@fabio.gambarin](https://forum.inductiveautomation.com/u/fabio.gambarin)\
**Post date:** [February 21, 2024, 3:41pm UTC](https://forum.inductiveautomation.com/t/upload-component-and-image-handling/85836/15 "2024-02-21T15:41:53Z")

</div>

Cleaning at view shutdown and when I write the image and the temp file are no longer needed

---

<div class="post-metadata">

**Author:** ![jeremie.vielfaure](https://avatars.discourse-cdn.com/v4/letter/j/c67d28/32.png) [@jeremie.vielfaure](https://forum.inductiveautomation.com/u/jeremie.vielfaure)\
**Post date:** [September 10, 2024, 9:27pm UTC](https://forum.inductiveautomation.com/t/upload-component-and-image-handling/85836/16 "2024-09-10T21:27:13Z")

</div>

Hi there,  
I noticed nobody provided a solution for you so here is one that my coworker made years ago. We use this to add/edit products to/in one of our internal company stores.  
Here is the script I am using in the onFileReceived event.

```python
def runAction(self, event):
     import base64
     byteArray = event.file.getBytes()
     base64_bytes = base64.b64encode(byteArray)
     source = base64_bytes.decode('ascii')
     self.getSibling(Dropdown_UploadedPics).props.options.append({label: event.file.name, value: len(self.getSibling(Dropdown_UploadedPics).props.options), source: source})

```

And we also have some scripting in the onUploadsCleared event.

```python
def runAction(self, event):
 	self.getSibling("Dropdown_UploadedPics").props.value = ""
 	self.getSibling("Dropdown_UploadedPics").props.options = []
 	self.custom.source = []

```

Hope this helps!