Upload Component and Image handling

Ignition
1

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

2

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?

3

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 !!!

4

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

5

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?

6

  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.)

7

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?

8

Show all of your scripts.

9

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

10

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

11

How? It matters. Show your code.

1 Like
12

This is the onFileReceived event:


	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:

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
13

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

15

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

16

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.

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.

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

Hope this helps!

1 Like