Rename photo with image upload

[TheDuke]

I have a UX component with fields that are bound to a sql table. One of the fields is a numeric field which contains a unique stockID and one is a path to an external image. I'm using the ImageUpload feature to save an image to a specific folder but would like to change the filename from the self-generated GUID to the bound stockID. For instance, I uploaded an image to my 'S:\AlphaImages' folder and it was given the filename of 'fcc928bd041c4422a082ee0eb1d0f6f2.jpg' so the path that was stored was 'S:\AlphaImages\fcc928bd041c4422a082ee0eb1d0f6f2.jpg'. If the unique stockID is '000001' then I want to rename the file as '000001.jpg' so the path would be 'S:\AlphaImages\000001.jpg'. Does anyone know how to reference the other bound control (stockID) and transform the filename as described?

[Clipper87]

Re: Rename photo with image upload

Can't you do that in the BeforeSave server side event ?

function beforesave as v (e as p)
'This function is called after an image has been uploaded, but before it is saved to a field in the current record.
'The binary data that was uploaded is passed into the function. Your script can check if it is a valid image and abort if not.
'The most typical reason for defining this event handler is to scale the image before it is saved.

'Request - The Request object. Includes Request.Variables, which should be used instead of the older e.rv construct
'Session - The Session object. Should be used instead of the older e.session construct

'The e object that is passed in contains:
'e.fileBlob - the binary data that was uploaded. Your script can manipulate this value. 
'e.uploadedFilename - the filename of the file on the client computer (does not include drive/path)

'In addition, e contains
'e.tmpl  - the Grid definition
'e.rtc - a pointer variable that is passed to all server side events

'Your event can set this property:
'e.filenameOnServer - (do not specify a drive/path) - the name of the file on the server.
'Notes: 1) This property is only relevant if the file will be stored as a link (as opposed to embedded)
'		2) If you do not specify this property the filename on the server is same as e.uploadedFilename
'		3) The physical file is stored in the 'UploadFolder' that was specified in the Action Javascript builder.

'In addition, your event can set these two properties
'e.abort  - if you set this to .t., the uploaded file is not saved to the database
'e.abortMessage  - message to display to user why the action was aborted.

end function

[TheDuke]

Re: Rename photo with image upload

Thanks for your reply Frank. I'm sure I can do it as you suggested but I'm new to Alpha & xBasic so I'm struggling with how to reference the controls (like the stockID primary key in this case). I'll play with it some more using debug(1) to step through the function and see if I can find the reference I'm looking for.

[TheDuke]

Re: Rename photo with image upload

I must really be missing something with xBasic. I've tried both the onBeforeSave and onStoredFileNameCompute server side events and it seems like neither actually fire. I've set different values and set debugging but nothing seems to get called. The xBasic function name is in the property and the function is defined in the xBasic function declarations but nothing. What am I missing?

[Steve Workings]

Re: Rename photo with image upload

Your syntax might a touch different because you're using an UX component, but here's something I have for a simple rename using the Image Upload on a grid component.

Using the Before save event, I call a function. It's a little fancier than what I show you here, but the important line is just this:

e.filenameOnServer = session.animal_id + "_a.jpg"

This works in this situation because it doesn't depend on the record being saved first. So let me ask you: is your record committed before the image is uploaded? If not, we've found a way to manage that too but it's a little more complicated.

[TheDuke]

Re: Rename photo with image upload

Thanks Steve. The record is not committed until the submit button is clicked which happens after the image is uploaded. Selwyn sent me a note that it might be better to let the image be saved with the default name and then rename it and update the path in the table after the fact. I'm working on that code now but I'm really stuck on why the onBeforeSave and onStroredFileNameCompute events aren't firing for me. I sent Selwyn the link listed below where I recorded what I'm doing so he can help me figure out what I'm doing wrong. Feel free to take a look and give me your feedback. I'm new to Alpha (converting from Access) so I must be doing something really stupid.

http://stambolian.com/newsletter/dld/untitled.html

[Davidk]

Re: Rename photo with image upload

The 3 server-side events available are firing when the Image Upload property Application Type is set to Desktop... but I'm finding that they don't fire when set to Mobile.

If we can get the OnStoredFilenameCompute to fire then your code would be something like this...

dim origFN as c = e.ops._fileOriginalName
dim origFolder as c = e.ops._uploadFolder
dim fileType as c = LASTWORD(origFN,".")
dim newFN as c = origFolder + "\\" + e.formData.old.V.R1.STOCKID + "." + fileType
e.targetFileName = newFN

The "e" object will give you e.ops and e.formData.

I'm kind of assuming you've got the stockID on screen to work with. In my case I have a Textbox control defined with a variable name of STOCKID, so that I can access that value in the XBasic routine and use it for the new filename.

This code gets the original filename and the original upload folder as you defined in the Action Properties.

Then we parse out the filetype of the file.

Next we put the new filename together with the Original Upload Folder, the StockId, and the file extension we parsed out.

This all works with Application Type set to Desktop. Now... if can get Mobile to play along...

[TheDuke]

Re: Rename photo with image upload

You're spot on David. Selwyn just wrote me back that the events are supposed to be hidden (not applicable) for a mobile application. I guess they're going to hide them in the next build. I'm not sure what kind of limitations this will impose but I've recoded my app using the afterDialogValidate server side event to simply rename the images after they've been committed and saved to disk. Thanks for your detailed reply... I'm sure I'll find it useful down the road.

[Davidk]

Re: Rename photo with image upload

Yeah... that happens some times... be nice if they were there... I thought that OnStoredFilenameCompute was perfect. I can't imagine the stuff they must go through to handle both sides of the fence... but they're doing an amazing job. The rename is a good solution. I was never too fond of 231234asdfq2341q23423.jgp :)

[TheDuke]

Re: Rename photo with image upload

In case anyone is interested or has a similar need, here is the Xbasic code I used in the afterDialogValidate server side event after the data is committed to rename the images to the primary key, e.g., if primary key = 1 then main image = '000001.jpg' and thumbnail = '000001_T.jpg'):

if rtc.flagRecordWasSaved then
dim cn as sql::connection
cn.open("::Name::jta")
dim sql_select as c
'sql_select = "select * from dbo.Inventory where uuid = :pk" 'if using generated keys
sql_select = "select * from dbo.Inventory where StockID = :pk"
dim args as sql::arguments
'args.add("pk",convert_type(rtc.primaryTablePrimaryKey,"K")) 'if using generated keys
args.add("pk",rtc.primaryTablePrimaryKey)
dim flag as l
flag = cn.Execute(sql_select,args)

if flag = .f. then
dim msg as c
msg = "alert('" + js_escape(cn.CallResult.text) + "');"
e.javascript = e.javascript + msg
exit function
end if

dim fn_image as c
dim fn_thumb as c
dim rs as sql::ResultSet
rs = cn.ResultSet
fn_image = rs.data("PhotoPathMain")
'fn_thumb = rs.data("PhotoPathThumb") 'if storing thumbnail path
fn_thumb = file.filename_parse(fn_image,"dpn") + "_thumbNail" + file.filename_parse(fn_image,"e")

dim fn_image_new as c
dim fn_thumb_new as c

fn_image_new = file.filename_parse(fn_image,"dp") + padl(alltrim(str(rtc.primaryTablePrimaryKey,6,0)),6,"0") + file.filename_parse(fn_image,"e")
fn_thumb_new = file.filename_parse(fn_image,"dp") + padl(alltrim(str(rtc.primaryTablePrimaryKey,6,0)),6,"0") + "_T" + file.filename_parse(fn_image,"e")

if file.exists(fn_image) then
if file.exists(fn_image_new) then
file.remove(fn_image_new)
end if
file.rename(fn_image,fn_image_new)
end if

if file.exists(fn_thumb) then
if file.exists(fn_thumb_new) then
file.remove(fn_thumb_new)
end if
file.rename(fn_thumb,fn_thumb_new)
end if

dim sql_update as c
sql_update = "update dbo.Inventory set PhotoPathMain = :new1 where StockID = :pk"

args.add("new1",fn_image_new)
'args.add("new2",fn_thumb_new) 'if storing thumbnail path

flag = cn.Execute(sql_update,args)
cn.close()

end if

[richardurban]

Re: Rename photo with image upload

I could not get images to scale using the a5_scale_imageblob function when trying to create thumbnails for a desktop application using David Kates method. The thumb image would have a size of 0 kb. This worked after I installed an update for stable release Build 2128-4292, however that build caused issues on the web server with improper display of date fields. When I installed the pre-release build, the date issue went away but the images did not scale again??? The image scaling using a5_scale_imageblob seems buggy, as others have reported.
Instead of using custom code and uploading from a grid component, I added a UX component that uses the image and thumnail upload genie. That works well
However, I could not get the Before Save event or the OnStoredFilenameCompute events in the image upload genie to change the name of my stored file(s) (large and thumbnail, or even just one of those).
Rather, based on the code above by The Duke, placed in the AfterDialogValidate server side event, I used the following code, which works well.

if rtc.flagRecordWasSaved then
Dim cn as sql::connection 
Dim args as SQL::Arguments
	dim fn_image as c
dim fn_thumb as c
flag = cn.open("::Name::urbangrocery")
args.set("new_code",e.dataSubmitted.new_code)	
sqlCommand = "select * from products where new_code=:new_code"

flag = cn.execute(sqlCommand,args)

dim rs as sql::ResultSet
rs = cn.ResultSet
flag = rs.NextRow()
if flag=.f. then
	afterDialogValidate = "alert('The Picture failed to upolad properly');"
	exit function
	end if
	

picture_ref=rs.data("picture_ref")	

fn_image = picture_ref
fn_thumb = substr(file.filename_parse(fn_image,"dp"),1,len(file.filename_parse(fn_image,"dp"))-5)  + file.filename_parse(fn_image,"ne")


dim fn_image_new as c
dim fn_thumb_new as c

fn_image_new = file.filename_parse(fn_image,"dp") + e.dataSubmitted.upc + file.filename_parse(fn_image,"e")
fn_thumb_new = substr(file.filename_parse(fn_image,"dp"),1,len(file.filename_parse(fn_image,"dp"))-5) + e.dataSubmitted.upc + file.filename_parse(fn_image,"e")
if file.exists(fn_image) then
if file.exists(fn_image_new) then
file.remove(fn_image_new)
end if
file.rename(fn_image,fn_image_new)
end if

if file.exists(fn_thumb) then
if file.exists(fn_thumb_new) then
file.remove(fn_thumb_new)
end if
file.rename(fn_thumb,fn_thumb_new)
end if

[Selwyn Rabins]

Re: Rename photo with image upload

i note the comment that the a5_scale_imageblob() function "seems buggy".

i am actually quite confident that the command works correctly. it is used very widely in AA.

1. we don't have any test cases from users that show any issue with the command. if you can point me to a test case that does show a problem, we will investigate it.
2. the command itself is nothing more than a thin wrapper around the ImageMagick 3rd party library which is bundled with AA.

I think that developers can use this command with confidence in their web apps.
the test cases you previously sent to us all work perfectly.

[richardurban]

Re: Rename photo with image upload

My main problem was that the a5_scale_imageblob() function did not work in the version I was running. This was a known issue. Upon installing a later version it did work (with no change in my code). Then when I installed the next version (pre-releasae) it did not work again (with no change in my code).

[richardurban]

Re: Rename photo with image upload

If you want to have a URL that is available publicly on your website, versus only privately to the Alpha Five program, you will need to add another field to specify what the URL is. Below I reference a field that has the path for the publicly available pictures, and add the name of the renamed picture to that path:

if rtc.flagRecordWasSaved then
Dim cn as sql::connection 
Dim args as SQL::Arguments
	dim fn_image as c
dim fn_thumb as c
dim pic_location as c
flag = cn.open("::Name::urbangrocery")
args.set("new_code",e.dataSubmitted.new_code)	
sqlCommand = "select * from products where new_code=:new_code"

flag = cn.execute(sqlCommand,args)

dim rs as sql::ResultSet
rs = cn.ResultSet
flag = rs.NextRow()
if flag=.f. then
	afterDialogValidate = "alert('The Picture failed to upolad properly');"
	exit function
	end if
	

picture_ref=rs.data("picture_ref")	

sqlCommand = "select * from user_data where user_id='01'"

flag = cn.execute(sqlCommand)
dim rs1 as sql::ResultSet
rs1 = cn.ResultSet
pic_location=rs1.data("picture_url")


fn_image = picture_ref
fn_thumb = substr(file.filename_parse(fn_image,"dp"),1,len(file.filename_parse(fn_image,"dp"))-5)  + file.filename_parse(fn_image,"ne")

dim picture_url as c
dim fn_image_new as c
dim fn_thumb_new as c
picture_url = pic_location + e.dataSubmitted.upc + file.filename_parse(fn_image,"e")
fn_image_new = file.filename_parse(fn_image,"dp") + e.dataSubmitted.upc + file.filename_parse(fn_image,"e")
fn_thumb_new = substr(file.filename_parse(fn_image,"dp"),1,len(file.filename_parse(fn_image,"dp"))-5) + e.dataSubmitted.upc + file.filename_parse(fn_image,"e")
if file.exists(fn_image) then
if file.exists(fn_image_new) then
file.remove(fn_image_new)
end if
file.rename(fn_image,fn_image_new)
end if

if file.exists(fn_thumb) then
if file.exists(fn_thumb_new) then
file.remove(fn_thumb_new)
end if
file.rename(fn_thumb,fn_thumb_new)
end if

Dim cn as sql::connection 
Dim args as SQL::Arguments

args.set("fn_thumb_new",fn_thumb_new)
args.set("fn_image_new",fn_image_new)
args.set("picture_url",picture_url)
flag = cn.open("::Name::urbangrocery")
dim sqlCommand as c
sqlCommand = "UPDATE products set picture_url =:picture_url, picture_ref =:fn_image_new, new_field2 ='Yes' where new_code =:new_code"

flag = cn.execute(sqlCommand,args)
cn.close()

end if 	
end function