how to load images in webspeed?

meLikeNoOther

New Member
hi!
any idea on how to load images? i have this element: <input type="file" accept="jpg,bmp"> to allow user browse any images they want to load from their pc.. now, i don't know how to get the image and load it to the server through webspeed.. please help.. thanks..
 

Cecil

19+ years progress programming and still learning.
Starting with OpenEdge 10.1A, webspeed supports upload of binary/BLOB
data files.
The following code is an example of how to create an HTML form that
can upload a file:
Code:
<HTML><BODY>
<FORM ENCTYPE="multipart/form-data"  ACTION="http://<yourhost>/<msngr
path>/<msngr>/ping" METHOD="POST">
<INPUT type="file" name="filename"> <INPUT type="submit">
</FORM>
</BODY></HTML>
To enable a WebSpeed application to accept binary/BLOB data from this
form, you must do following:
• Upgrade your WebSpeed Messenger to OpenEdge R10.1A. The Messengers
in previous versions cannot accept BLOBs.

• Specify a maximum size for uploaded files The maximum size is set
with the binaryUploadMaxSize property in the ubroker.properties file.
You can set it on the Agent>Advanced Features page of the WebSpeed
Transaction Server’s Properties sheet

• Write code to manipulate the uploaded file through its MEMPTR. This
code should ensure that the uploaded file contains no malicious
content before it is stored to disk. WebSpeed provides a new API
function "get-binary-data" to return the file’s MEMPTR.

Code:
/* This example shows how to retrieve the data from a file passed on a
given request, and save it as a file with the same name to the
WebSpeed's working directory. Note that 'filename' is the name of the
field in the form posted. */ 
DEFINE VAR mFile AS MEMPTR NO-UNDO. 
DEFINE VAR cfile AS CHAR NO-UNDO. 
/* 'filename' refers to the name of the field in the form.
get-binary-data returns the contents of the file associated with the
form field named 
'filename'. */ 
ASSIGN mFile = get-binary-data("filename"). 
IF mFile <> ? THEN DO: 
/* if we got a valid pointer, save data to file. The value of the
field 
'filename' is the file name posted */ 
ASSIGN cfile = get-value("filename"). 
COPY-LOB FROM mFile TO FILE cFile NO-CONVERT. 
END.
 

meLikeNoOther

New Member
i haven't tried the code yet but thanks a lot..
i would just like to add other details regarding my post that the image should be saved on the database and could be retrieved to be displayed on screen. how's that possible on webspeed and working with web browsers? (hope, i'm making any sense..:D)
 

Cecil

19+ years progress programming and still learning.
Small note this code only works on OpenEdge 10.1+.

Also as I have looked into storing images in the DB and as much as it seams nice the result is not good. If you are storing little images then it might not be too much of a problem. However I see that BLOBs can be a DBA worst nightmare.

I might have started a debate whether or not to store image/binary files on the db.

The following is an example of how to store an image in a BLOB field.

Code:
CREATE WIDGET-POOL.

DEFINE TEMP-TABLE ttImage NO-UNDO
    FIELD cImageName AS CHARACTER FORMAT "X(125)"
    FIELD bImage AS BLOB
    INDEX imageName AS PRIMARY UNIQUE cImageName.

DEFINE VARIABLE C-Win AS WIDGET-HANDLE NO-UNDO.

DEFINE BUTTON bAddImage
    LABEL "Add Image" 
    SIZE 15 BY 1.14.

DEFINE IMAGE IMAGE-1
    FILENAME "adeicon/blank":U
    STRETCH-TO-FIT
    SIZE 172 BY 30.

DEFINE QUERY brImages FOR ttImage SCROLLING.

DEFINE BROWSE brImages
    QUERY brImages 
    DISPLAY ttImage.cImageName
    WITH NO-ROW-MARKERS SEPARATORS SIZE 50 BY 13.81 FIT-LAST-COLUMN.

DEFINE FRAME DEFAULT-FRAME
    bAddImage AT ROW 1.48 COL 1.8
    brImages AT ROW 3.19 COL 1
    IMAGE-1 AT ROW 3.24 COL 52
    WITH 1 DOWN NO-BOX KEEP-TAB-ORDER OVERLAY 
         SIDE-LABELS NO-UNDERLINE THREE-D 
         AT COL 1 ROW 1
         SIZE 223.2 BY 32.67.

CREATE WINDOW C-Win ASSIGN
    HIDDEN             = YES
    TITLE              = "Image"
    HEIGHT             = 32.67
    WIDTH              = 223.2
    MAX-HEIGHT         = 32.67
    MAX-WIDTH          = 223.2
    VIRTUAL-HEIGHT     = 32.67
    VIRTUAL-WIDTH      = 223.2
    RESIZE             = yes
    SCROLL-BARS        = no
    STATUS-AREA        = no
    BGCOLOR            = ?
    FGCOLOR            = ?
    KEEP-FRAME-Z-ORDER = yes
    THREE-D            = yes
    MESSAGE-AREA       = no
    SENSITIVE          = yes.

ENABLE bAddImage brImages IMAGE-1 WITH FRAME DEFAULT-FRAME IN WINDOW
C-Win.

VIEW C-Win.


ON VALUE-CHANGED OF brImages IN FRAME DEFAULT-FRAME
    DO:
        DEFINE VARIABLE cFile AS CHARACTER  NO-UNDO.

        ASSIGN cFile = SESSION:TEMP-DIRECTORY +
ENTRY(NUM-ENTRIES(ttImage.cImageName, "\"),ttImage.cImageName, "\").

        FILE-INFO:FILE-NAME = ttImage.cImageName.

        COPY-LOB ttImage.bImage TO FILE cFile.

        IMAGE-1:LOAD-IMAGE(cFile).

        OS-DELETE cFile.
    END.

ON CHOOSE OF bAddImage IN FRAME DEFAULT-FRAME /* Add Image */
    DO:
        DEFINE VARIABLE cFile  AS CHARACTER  NO-UNDO.
        DEFINE VARIABLE rRowid AS ROWID      NO-UNDO.

        SYSTEM-DIALOG GET-FILE cFile
            FILTERS "BMP" "*.bmp", "JPG" "*.jpg", "ALL" "*".

        CREATE ttImage.
        ASSIGN ttImage.cImageName = cFile
               rRowid = ROWID(ttImage).

        COPY-LOB FROM FILE cFile TO ttImage.bImage.

        OPEN QUERY brImages FOR EACH ttImage NO-LOCK.

        brImages:QUERY:REPOSITION-TO-ROWID(rRowid).

        APPLY "VALUE-CHANGED":U TO brImages.
END.

WAIT-FOR CLOSE OF THIS-PROCEDURE.
 

meLikeNoOther

New Member
yup, we're on openedge 10.1 already so it would definitely work..but we're developing a web application that would run on web browsers like Internet Explorer and the likes so i must first go through to your code and get any idea that would be possible on web..thanks
 

mobrien

New Member
Hi,

We have a similar requirement where we are going to be sent an image in an xml file that we need to store on the db and display on the web when required.

Did you have any problems with displaying the images on the web?

Thanks!
 
Top