Upload, Scale and Save Pictures in Web App

Targets Web
#1

Some of this may be very obvious, but as a weekend hobbyist, a lot of supposedly simple things go right over my head.

I’ve searched through the forum, and found a few things a kind of applied, but they all seem to be pre-RB2020, and don’t always work.

Right now I have a listbox that, when selected, puts all the necessary user info into various textfields, popupmenus, etc.

I need to figure out how to upload and use a picture along with this, and I’m stuck.

I’ve written up some pseudocode to show my thinking, and would appreciate any help with this.

//Upload Picture

User Selects Picture to Upload
Check to see if Picture is useable
If Picture is not the correct type then
  try
    Convert the picture to something useable then do the above actions
    if the picture cannot be converted to something useable then
      Let the user know the Picture will not work
    end if
  end try
  
else if User Selects a Useable Picture then
  
  Save the Picture to a Database //Full size version kept for viewing if User needs it
  Scale the picture to fit a WebImageViewer
  Save the ScaledPicture to a database //scaled version to be pulled out later for faster loading
  
end if
#2

you should start here to get the pictures first.
https://documentation.xojo.com/api/user_interface/web/webfileuploader.html

It is possible that upload with bigger images still does not work, at least my experience at android with web api 2.

image in database are blob,binary,or object fields. each database system have different approaches.

for a tumbnail you create a new picture and paint the original scaled into the picture graphics context.
that seems only possible with picture class not direct with webpicture.

#3

Thanks Markus. I confess I’m not quite sure where to go with that information just yet, but I’ll dig in and see what I can learn. :+1:

#4

So, I dug into the example projects, get the uploader working and image placed in the WebImageViewer easily enough, although I have a weird problem where, when I select a HEIC image it loads 90º counter-clockwise (jpegs, gifs work fine).

I found some old code from a desktop project I’d make about a decade ago to do the thumbnail:

// Take a picture and resize it into a thumbnail.

dim thumb as Picture
dim ratio as double

// Return nil if image is Nil
if image = nil then
  return nil
end if

// Create Image Thumbnail
if image.Width > image.Height then
  ratio = image.Height / image.Width
  thumb = New Picture(400, 400 * ratio, 32)
else
  ratio = image.Width / image.Height 
  thumb = New Picture(400 * ratio, 400, 32)
end if

// Draw Thumbnail
thumb.Graphics.DrawPicture image, 0, 0, thumb.Width, thumb.Height, 0, 0, image.Width, image.Height

// Return Thumbnail
return thumb

Next step, I assume, is save the original image in one column of the database and the thumbnail in another, yes?

#5

Never used this heif , but you can read about at wikipedia.
I would use 2 “binary” fields and a mime type field or something that you know what kind of file you stored.

#6

HEIF is the default I get from my iPhone pictures.

I will look into that solution. Thank you.