Upload pictures to server, call pictures within perspective

Maker
1

I am doing a for-fun project and looking to do something similar to how selecting a user profile picture for a user would be.

Here's what I am imagining to do, I'm just not sure how to do this and/or if this is the right way to do this. This is a private application so I don't need any crazy security or things for failsafe/issues, and it can be ugly. This will run in perspective:

  1. User interface to upload picture. Picture stored on gateway server.
  2. Go to web page with details of user info. Data set is stored in db and is pulled when you go into that user's page.
    FOR LOADING IN PICTURES ON THIS PAGE:
  3. db column 'imagePath' contains directory on server to the image. When data set loaded in, there's some way to grab that path and load in image from that path.
    FOR SAVING/SELECTING PICTURES:
  4. whatever is easiest for this. If there's a input field where you just type the image name and that updates the db which then updates image that's shown. Or maybe a windows explorer popup and you select the image in a directory.

Any help on this is appreciated!!

2

If you're already using a DB...why not just store the images in the DB? Use a BLOB column, or whatever your DB calls it, and you're done. Profile pictures aren't going to be very large.

3

OK I'll look into BLOBs on SQL side, I have never used them.

How can I display it on ignition perspective side does it just come through and display it or something else*?

edit: Uploading pics into the db too so I still need interface for user to convert image to blob

4

Check out Phil's module.

2 Likes
5

No, you literally take the binary bytes of the image out of the file upload component and shove it directly into the database. No conversion needed.

You can also use data URIs (free, but some performance limitations), or Ignition's first-party WebDev module (at cost) to serve the files out of the database. Phil's module is free though, so as long as you're not running on Ignition Edge it's a fine option.

1 Like
6

edit: Ahh above mentions File Upload component I'll look into that..probably what I need!

Phil's worked great for what I need!

I'm still unsure the best way to get images into the db, did I miss something in Phil's or is there a good way in Perspective to do upload an image and push into db blob column?

Right now I can force them in with something similar to below (mssql):

INSERT INTO Images (ImageName, ImageData)
SELECT 'example.jpg', 
       BulkColumn 
FROM OPENROWSET(BULK 'C:\Path\To\Your\Image\example.jpg', SINGLE_BLOB) AS ImageFile;
7

To upload a file in Perspective, you must use the file upload component:

Your code won't work in real usage. Perspective scripts are actually running wherever the Ignition Gateway is, so the C:\ reference you're giving is relative to the Gateway's filesystem. And in actual user sessions on different browsers/mobile devices/etc, browsers are not allowed access to the local filesystem at all, because of malware. The File Upload component (which only works when the user directly interacts with it, and opens a browser-provided file picker) is the only way to upload files in Perspective.

1 Like