Four Js Development Tools Forum

Discussions by product => GAS and GBC => Topic started by: Gary C. on January 05, 2018, 10:46:57 am


Title: Image Rendering in Display Array
Post by: Gary C. on January 05, 2018, 10:46:57 am
Hi

I think this is the correct forum area to post this.

I am using the latest release of GBC and have undertaken a minimal amount of customisation (hiding the sidebar and redirecting to an alternative application end page).

I have an issue with the displaying of images within a display array in IE (various versions). It works in Chrome.

The symptom is that the image is just not displayed and I am not sure if it is my approach, a browser issue or GBC. The 4GL code I am using looks like that below:

Code:

DEFINE imageA dynamic array of record
    description string,
    img byte
END RECORD,
imageID INTEGER,
imageDesc STRING

DECLARE imgC cursor FOR....

FOREACH imgC INTO imageID, imageDesc 
    LET imageA[imagA.getLength() + 1].description = imageDesc
    LOCATE imageA[imagA.getLength()].img in file
    SELECT imageblob INTO imageA[imagA.getLength()].img FROM imagetable
        WHERE id = imageID
END FOREACH

DISPLAY ARRAY imageA to imageR.*

END DISPLAY


As ever, any help would be appreciated.

Gary
 

Title: Re: Image Rendering in Display Array
Post by: Sebastien F. on January 05, 2018, 11:12:54 am
Hello Gary,

Regarding the SQL/BYTE usage in your code example, to me it looks good.

It can however be optimized to avoid a second SELECT inside the FOREACH.

For an example see this page:

http://4js.com/online_documentation/fjs-fgl-manual-html/#c_fgl_variables_LOCATE.html

See also:

http://4js.com/online_documentation/fjs-fgl-manual-html/#c_fgl_images_dynamic_images.html

A sample is available in FGLDIR/demo/Widgets/ImageList.4gl

Seb

Title: Re: Image Rendering in Display Array
Post by: Gary C. on January 07, 2018, 10:03:38 am
Hi

In case anyone else comes across this, this is what I have done to overcome the problem.

When I inspected the image element in the browser I could see that it's URL was pointing to the user's temporary session area and had been given a random number as a name. However, there was no file type extension.

I think Chrome must be looking at the content to infer the file is an image whereas IE does not.

So, I changed the code to use the LOCATE IN FILE instruction for the blob and specified the original file name when the image was uploaded. Now the URL has a file type and displays across all browsers.

Gary

Title: Re: Image Rendering in Display Array
Post by: Sebastien F. on January 07, 2018, 11:51:35 am
Hi Gary,

Thanks for sharing this!

You mean that you have to use:
 
Code:
LOCATE var IN FILE filename
with file image extension instead of:
 
Code:
LOCATE var IN FILE
to make it work?

We need to double check this and may add it to the programming pattern... or handle the case automatically.

Note: Since the LOCATE file name is no longer unique, you may want to consider concurrent programs using the same file names.
You may want to produce a temporary file name with os.Path.makeTempName() and concat the image format extension...

Seb

Title: Re: Image Rendering in Display Array
Post by: Sebastien F. on January 07, 2018, 12:32:36 pm
Gary,

Please open a support case and provide all configuration and version details.

I have just tested the ImageList demo with FGL 3.10 and fglgar war and Microsoft Edge and images are visible.

I cannot test IE.

Seb

Title: Re: Image Rendering in Display Array
Post by: Sisavanh S. on January 08, 2018, 11:35:12 am
Hi Gary,

Indeed, since GAS 3.00.35 and GAS 3.10, for security reasons, we have activated by default the header "X-Content-Type-Options" with value "nosniff".
In as.xcf, you can check:

Code
  1. <HEADER Name="X-Content-Type-Options">nosniff</HEADER>

As you noted, now the file to display requires an extension.
As you did, you can use

Code
  1. LOCATE var IN FILE filename
where the filename has an extension.

For example:

Code
  1. LET filename = os.Path.makeTempName() || ".jpg"

You can use "os.Path.makeTempName()" to create your temporary file.

Freeing your BYTE will automatically remove the related temporary file.
For example:

Code
  1. FREE var

We will add a migration note about this in the manuals.

Thanks for reporting and sharing.
Best regards,
Sisa.

Title: Re: Image Rendering in Display Array
Post by: Sisavanh S. on January 08, 2018, 03:50:17 pm
Hi again,

More details about this issue.
The issue happens on Internet Explorer 11 not on Edge, Chrome or Firefox.

"X-Content-Type-Options" is applied on "script" and "style" files:
https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/X-Content-Type-Options.

Anyway, better set extensions to your files to avoid any misbehavior.

Best regards,
Sisa.