nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

FormAPI to validate image size

mogoo

Does anyone know how to find out an image's size using FormAPI? I'm looking for the javascript equivalent of perl's Image: Smiley Frustrated

ize...
Thanks!
maureen

Find more posts tagged with

Comments

Adam Stoller

Is this something you need to do in the DCT/DCR? Or something that you can handle in the PT (where Perl is more readily available for use)?

--fish
(Interwoven Senior Technical Consultant)

mogoo

This is something that would be handled in the DCT... For example, if a certain image can NOT be over 70px wide, that's something I'd like to validate for using FormAPI, if it's possible. All I'm wondering is if, given an image, FormAPI can check an it's width. So if the image entered into the field is, say 89px in width, an alert box would pop up, telling the user to get a smaller (70px wide) image.
maureen

Adam Stoller

Hmm - okay - well a quick search through Google found a few articles, one of which indicated that the only way to get the image's size was to pre-load it and then you can reference it with code like: document.images[0].width, and document.images[0].height - but that doesn't sound like what you want to do...

I also found this little ditty for calling Perl (in the form of a CGI) from within javascript&colon;

<script language="JavaScript">
function submit_input () {

var my_title = document.meta.title.value
var my_auth = document.meta.author.value

// here is the new part
window.document.location =
"http://hawk.umd.edu:8080/cgi-bin/bookrecords.pl?author="+ my_auth
+ "&title=" + my_title
}
</script>

Don't know if that helps, but ...

--fish
(Interwoven Senior Technical Consultant)

MultiChannelTwice55.dcpackage.zip

Johnny

Maybe you could use the callServer method in formapi to a perl script that uses
Image: Smiley Frustrated

ize or Image::Info

then return something back ....

I havent used callServer so I dont know how easily you integrate it into your validation.

It should be a way to go.....

Let us know how you go.

John Cuiuli
Consultant
Sydney, Australia

gzevin

Do you really need to know the image size on the DCT level?

My approach is to determine image size at the TPL level...

Greg Zevin
Independent Interwoven Consultant/Architect
Sydney, AU

Johnny

have a read at magoo's requirement greg Smiley Wink

John Cuiuli
Consultant
Sydney, Australia

gzevin

John,

I have read - and this is exactly I am saying that the requirement itself might be wrong, or could be changed at different point. I cannot see why anyone would need image sizes at the datacapture stage

Greg Zevin
Independent Interwoven Consultant/Architect
Sydney, AU

MattP

I understand why you would want to do this. It seems like having the validation in the TPL would be too late. Ideally there is a way to filter it on upload, or when you browse to select the image. If you know the image HAS to be exactly 70 pixels wide (no smaller or wider) then you could add it to the img tag.
I would be interested in the process you decide on.

Matt

Matthew Petitjean
BOC Group
Murray Hill, NJ 07974 USA

mogoo

Precicely, Matt! There are cases where any image larger than "n" pixels wide would break the layout... or you may just want to control the size because the layout would look bad visually if the image were too large/too small.

I'll post whatever solution I come up with when I get it working...
maureen

mogoo

OK, I've got it... attached is the dct and the ipl in which I use Image: Smiley Frustrated

ize...
I can't get it to work on an "onSave" event, though -- can anyone point me in the right direction?
thanks,
maureen

occurence.png

Gregg Faus

I wrote a custom JSP image library that I use to upload images and do verification checks. I haven't added an image size check but it would be easy to do.

You might consider doing something like this.

Property.zip

MattP

maureen-
what directory did you put the script in? httpd/iw-perl?

I seem to be failing when it tries to load image::size

Matt

Matthew Petitjean
BOC Group
Murray Hill, NJ 07974 USA

Edited by MattP on 05/07/03 08:21 AM (server time).

Jens

At the "onSave"-Event you call the function findImgSize directly. And on this event you pass a "button" to your function and not the item, so i think this could be the problem.

Ciao,
Jens

mogoo

Matt-
Yes, the ipl is in httpd/iw-bin...
Did you remember to change this line in the script for your environment -- #!/apps1/iw-home/iw-perl/bin/iwperl -w
Also, are you sure you have the Image: Smiley Frustrated

ize module? I can't remember, it might have been something we had to add?
maureen

jkm

In this thread couple of ways suggested for image validation
1. In TPL using perl Image::size module
2. FormAPI
3. CallServer

In TPL its too late to validate something. It should be on DCT level.

Is there anyway by which we can restrict user to browse the image of wrong pixels ? For example if my DCT expects images of 89 * 150 pixels then user should see only those images on click of browse button.
If Yes, it would be helpful if ou share the same or if not then which is the recemonded way for image validation in DCT

mstradling

You could modify/create your own browser callout. You could then check the image size when the user tried to save the image path to the DCR and error at that point.

Tim__D

Register an onchange event and use normal jscript to preload and get the image properties. Then you can do whatever you want. In the past I have allowed the image to be placed but served a warning to the user. Check this for errors as I have modified it quickly for you as an example.

//Image based event handler
IWEventRegistry.addItemHandler("/Image", "onItemChange", setImage);

//IMAGE PRELOAD
//imgObj - the name of the object associated with the image
//imgSrc - the source filename (url) of the image
function doPreload(imgObj,imgSrc) {
if (document.images) {
eval(imgObj + ' = new Image()');
eval(imgObj + '.src="' + imgSrc + '"');
}
}

function setImage() {
var strImagePath = IWDatacapture.getItem("/Image").getValue();
doPreload('objImage',strImagePath);
//validate input
if((objImage.width > 182) || (objImage.height > 300)) {
alert('The image you have selected is larger than the recommended size.\nThe maximum recommended width and height is 182 x 300 Pixels.\nUsing this image could cause the page to display incorrectly.');

}
setTimeout('IWDatacapture.getItem("/Image Width").setValue((objImage.width))',1000);
setTimeout('IWDatacapture.getItem("/Image Height").setValue((objImage.height))',1000);
}

Edited by Tim__D on 01/12/06 06:44 AM (server time).

bturns

I currently have a solution for this running in our production environment. It includes the following functionality:

1) When user updates an image field, FormAPI:callServer runs a perl script to determine image size
2) if image size is with in acceptable limits the form accepts the image
3) if image size is outside of the acceptable limits it will either give user an alert or ask the user to change the image size

It's easy to set up. I can share code if you haven't already figured this out.

Thanks,

Brian

Migrateduser

Sure attach the code please.

gzevin

I currently have a solution for this running in our production environment. It includes the following functionality:

1) When user updates an image field, FormAPI:callServer runs a perl script to determine image size
2) if image size is with in acceptable limits the form accepts the image
3) if image size is outside of the acceptable limits it will either give user an alert or ask the user to change the image size

It's easy to set up. I can share code if you haven't already figured this out.

Thanks,

Brian

how about images that are in visual format fields?

Tim__D

Register an onchange event and use normal jscript to preload and get the image properties. Then you can do whatever you want. In the past I have allowed the image to be placed but served a warning to the user. Check this for errors as I have modified it quickly for you as an example.

//Image based event handler
IWEventRegistry.addItemHandler("/Image", "onItemChange", setImage);

//IMAGE PRELOAD
//imgObj - the name of the object associated with the image
//imgSrc - the source filename (url) of the image
function doPreload(imgObj,imgSrc) {
if (document.images) {
eval(imgObj + ' = new Image()');
eval(imgObj + '.src="' + imgSrc + '"');
}
}

function setImage() {
var strImagePath = IWDatacapture.getItem("/Image").getValue();
doPreload('objImage',strImagePath);
//validate input
if((objImage.width > 182) || (objImage.height > 300)) {
alert('The image you have selected is larger than the recommended size.\nThe maximum recommended width and height is 182 x 300 Pixels.\nUsing this image could cause the page to display incorrectly.');

}
setTimeout('IWDatacapture.getItem("/Image Width").setValue((objImage.width))',1000);
setTimeout('IWDatacapture.getItem("/Image Height").setValue((objImage.height))',1000);
}
Edited by Tim__D on 01/12/06 06:44 AM (server time).

The code I provided does do what it says but I have since removed code like this for my Teamsite 6.5 upgrade. Something to do with use of setTimeout() I think causes an issue with the FormsPublisher global javascript objects and prevents the saving of DCR's after the onchange event is called. I would no longer suggest leveraging the above code as is.