0

How to send Base64 encoded data using JavaScript to server-side

asked 2013-08-01 04:09:47 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2615 3 8
http://emrpms.blogspot.in...

updated 2013-08-02 13:52:58 +0800

Hi Using javascript, i am trying to assign the image at the local file system to the ZK Image component. It seems to be that, it is not possible, so other way is to use Native img element to show the image. But i need to store that image in the database via MVVM Any idea on this ?

How to send Base64 encoded data using JavaScript to server-side (ZK)

delete flag offensive retag edit

Comments

what do you mean "image at the local file system", does the image file not exist inside war file?

vincentjian ( 2013-08-05 09:25:44 +0800 )edit

10 Answers

Sort by ยป oldest newest most voted
0

answered 2013-08-02 14:48:00 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2615 3 8
http://emrpms.blogspot.in...

Or in other way, do you anybody know how to send Base64 encoded data(image) using JavaScript to server-side (ZK)

link publish delete flag offensive edit

Comments

Base64 encoded data is a String, you can fire event from client side and bring the encoded string to server side, check the reference document

vincentjian ( 2013-08-05 09:22:17 +0800 )edit
0

answered 2013-08-05 14:45:33 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2615 3 8
http://emrpms.blogspot.in...

Let me give the details what we are trying to achieve. A small device (scanner) will be attached to the desktop PC.
And user will keep the driving license card in that machine. Then we need to scan both front and back part of the driving license and store as image. And also, we need to extract the data such as first name, last name, etc.

  1. Scanning device company has provided an example in Javascript + HTML. You can check here. (https://gist.github.com/senthilmuthiah/6109799)

  2. If you see that example, in the ScanCard js method, CSSNLibJ.ScanToFileJ(""); //scan file to buffer & disk. So this method, returns scanned image and then you can see, the following code display the image in the screen using native HTML image as follows

    if (cardSide == "front") { document.getElementById('scanImage').innerHTML = ""; } else { document.getElementById('scanBackImage').innerHTML = ""; }

  3. Now i am just converting the above example code into ZK + Java script. Instead of Native HTML Elements, i am using the ZK elements. After help, now i am able to connect the device using ZK Applet and sucessfully the scanning also. But i got into problems in showing that image in the screen and also no idea how to take that image to server side You can check the code so far i have done. https://gist.github.com/senthilmuthiah/6156004

Please help me to complete this task :)

link publish delete flag offensive edit
0

answered 2013-08-07 05:08:44 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

updated 2013-08-07 05:27:21 +0800

Can you try to narrow down your question? Or most people like me do not have such an device, cannot really provide a suggestion.

For example, right click on the scanned image and select inspect element to see the real content of it, then the question probably become "how to encode an image to base64 String at client side and transfer it to server" or "how to transfer image link to server and encode it at server side".

link publish delete flag offensive edit
0

answered 2013-08-07 11:06:02 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2615 3 8
http://emrpms.blogspot.in...

Here is my real problem. I have been trying any one of the ZK Team to just see on the remote machine how it works and help further on it. But not any body interest, so trying to explain it again and again in different way.

So still thinking how to explain it better way to finish the module, client is really killing me to finish

link publish delete flag offensive edit
0

answered 2013-08-09 07:17:10 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2615 3 8
http://emrpms.blogspot.in...

Hi benbai and vincentjian.

Ok. Let me change my question in my simple way. Can you please show me an example for the following

  1. In the ZUL, one ZK Image component , one Native HTML img component and one ZK Button.
  2. By default, let ZK Image be empty and Native HTML img contains image.
  3. Now on clicking of the ZK Button, Pass the image data into server (to java code either in MVVM or MVC) and then display that image in ZK Image Component

Did you understand ?

link publish delete flag offensive edit
0

answered 2013-08-09 14:40:10 +0800

cgraf gravatar image cgraf
22 3

Hi,

can't you to adapt an upload button? Follow a pure java example:

// todo: append image and button to any window
public void ImageInput() {
    final int width = 200;
    final int heigh = 150;
    final Image image = new Image();
    Button button = new Button("Upload");
    button.setMold("trendy");
    button.setUpload("true,maxsize=200");
    button.addEventListener("onUpload", new EventListener() {
        @Override
        public void onEvent(Event event) throws Exception {
            UploadEvent uploadEvent = (UploadEvent) event;
            Media media = uploadEvent.getMedia();
            if (media == null) {
                MensagemUtil.aviso("Fail");
            } else {
                if (media instanceof org.zkoss.image.Image) {
                    org.zkoss.image.Image img = (org.zkoss.image.Image) media;
                    ByteArrayInputStream is = new ByteArrayInputStream(img.getByteData());
                    image.setContent(ImagemUtil.resize(ImageIO.read(is), width, heigh));
                } else {
                    MensagemUtil.aviso("Not an image");
                }
            }
        }
    });
}
link publish delete flag offensive edit
0

answered 2013-08-09 17:42:23 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

Does the HTML img contains image with a link? If so, whether the server can access this link or it can be accessed at client only?

link publish delete flag offensive edit

Comments

The image is at the client side only. The scanning device, after scanning the card, it stores the image at the client side only.

Senthilchettyin ( 2013-08-09 19:30:05 +0800 )edit

It stores as base64 encoded data or as a file in the local client computer (say for example, c:\temp\frontcard.jpg)

Senthilchettyin ( 2013-08-09 19:39:05 +0800 )edit
0

answered 2013-08-09 17:51:54 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

If HTML5 is an option, you can try to achieve it as below:

  1. Load image into a canvas.

  2. Get download url of canvas, pass it to server, store it and transfer it to an image then assign it to ZK image component.

Regarding load image into a canvas, please refer to loadImage function within the code below:

basiccanvastest.html

Regarding step 2, please refer to the sample below:

Canvas2Image

References:

Articles at my blog:

HTML5 Canvas: Basic functions

ZK Store Canvas Image to Server

link publish delete flag offensive edit

Comments

If HTML5 is not an option, there are several ways you can try: 1, Handle upload action with javascript (and probably a hidden ZK upload button) to upload HTML image to server then process it. 2, Use an Applet to encode it at client side then pass it to server.

benbai ( 2013-08-09 17:57:51 +0800 )edit

:). I love ZK and started working with that because it hides all the other head ache like javascript, HTML, etc. But i think, i need to learn other stuff also. All these are new to me. But let me try.

Senthilchettyin ( 2013-08-09 19:32:34 +0800 )edit

Do you have any example please for option 1 in the non HTML 5 option ?

Senthilchettyin ( 2013-08-09 19:41:07 +0800 )edit
0

answered 2013-08-13 10:43:38 +0800

vincentjian gravatar image vincentjian
2245 6

Hi,

Does the applet always can return base 64 encoded string? If yes, you can simply put the string inside a invisible textbox, then click on button to decode the base 64 encoded string.

link publish delete flag offensive edit
0

answered 2013-08-16 08:15:27 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

@Senthil

After further investigation, it seems impossible to do it with pure javascript (refer to File upload with Javascript without user intervention, I also tried applet way but it seems need user to set up a policy file (see embedding policy file in a jar file

For now I'd suggest just make the file path readable (e.g., display it in a textbox) and let user to upload it manually.

And as Vincent mentioned above, I believe the tools for the device you installed should already provide some utils to transfer image file to base64 and you can pass base64 String to server with ease.

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2013-08-01 04:09:47 +0800

Seen: 73 times

Last updated: Aug 16 '13

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More