Upload file to an image component in perspective

Hi All,
Please assist is it possible to use the upload file component to upload an image into an image component in perspective ?

Thanks for your assistance

Yes. The image component needs a URL pointing at the image file, so you have to either transform the image file bytes into a Data URL (base64 encoding, basically), or store the image file content in a place Ignition can reach to feed it back to the image component in your browser.

For the latter approach, the WebDev module is the canonical solution. If you want to avoid spending those $$, and you can use a database to hold images as blobs, you might find my Blob Server module helpful.

I have the Web Dev module, please elaborate

In the upload component's file received event, you would save the file to a specific folder in the gateway, probably assigning a pseudo-random file name to it. You would then send that file name to the image component (message, session prop, whatever) where it would be incorporated in a WebDev URL. The WebDev module would have a doGet() method that can deliver that content.

You probably would want to use a database to hold metadata about uploads, tying original filename, upload user, timestamp, et cetera, to the generated file name. What to include depends on what you intend to do with these uploaded images.

Its basically a Work Instruction that was converted to a gif. I want to avoid the engineers coming to me every time they change the instruction, so i want to make a view that allows them to upload the gif or pdf and displays it .

Makes sense. The meta data should include a reference to the applicable process. Or the primary key for the image/pdf should be attached to the process information elsewhere in your DB.

(I would probably favor DB blob storage instead of file storage--no need to create random file names if the DB makes a unique primary key automatically.)

1 Like

Could you please provide me more info on how i would be able to achieve what i want to do, by your suggestion. Maybe like a guide or something

I haven't had to do this myself, yet, in spite of being the author of the Blob Server module. There are many examples and variations scattered around on this forum.

I am on the same boat right now..
I need perspective to store uploaded image somewhere, then be able to retrieve it and feed to a image component.
I must try both options.. :slight_smile:
go go go.!

Using webdev.
I am new to webdev, also cannot find how-to resource.
I created a mounted Folder:

I also prepared my Upload Component:

Then what?

Edit:
Ohhh, I think I know where I am going..

on onFileReceived event.

The below did not work..

What should be the path to the mounted folder:
image