Applet for Submitting Screenshot

Submitting screenshots through the web takes several steps more than it ought to. Firstly we have to paste it into mspaint.exe, save it to disk, only to then fiddle around with the File upload to look for the file again.

Another way to do it is via a signed applet. Unfortunately, the signed applet is unable to cooperate with the rest of the HTML form to submit multipart posts.

The next best thing is to send the screenshot to a hidden field with a base64 encoded image.

Download signed jar with sources SImageUploadApplet.jar

Here’s a proof of concept:

image upload applet

Download signed jar with sources SImageUploadApplet.jar

It’s 2009, perhaps HTML should have a rich text area that can submit inlined images.

8 Comments

  1. I think there is a way to do this in javascript with Canvas, although you would be limited to the content portion of the browser.

  2. Why not using an existing upload applet that supports cross-browsers and HTTP multifiles upload ? You have one at:
    http://www.jfileupload.com/products/jfileupload/index.html

  3. Love this concept, even 2 years later! Can you give me a short snippet on what the best mechanism is to integrate this into an HTML form would be? for instance, if my hidden field id is hiddenscreencap:

    (I’m substituting []’s for ‘s to avoid any HTML confusion)

    [textarea id="hiddenscreencap" name="hiddenscreencap" style="display:none;"][/textarea]

    How do I:

    a) tell the browser in question to access the jar file and run it? Is it as simple as this?:

    [script language="javascript" src="SImageUploadApplet.jar"][/script]

    And how do I pass the id/name of the field to the jar applet to tell it where to dump the data it gets from the paste?

    Thanks, in advance!

    -Paul

  4. Oops – script tag above was supposed to be an Applet tag. That’s not an issue anymore – The bigger one is how to tell the jar file what name/id to dump the data to!

  5. It is hard coded to id=”image”. Have a look at Main.java

    public void setField()
    {
    final Object applet = this;
    try {
    DOMService service = DOMService.getService(this);
    service.invokeAndWait(new DOMAction()
    {
    public Object run(DOMAccessor accessor) {
    Element e = accessor.getDocument(applet).getElementById(“image”);

    if (e != null)
    e.setAttribute(“value”, getImageAsBase64());

    return null;
    }
    });
    } catch (DOMAccessException ex) {
    Logger.getLogger(Main.class.getName()).log(Level.SEVERE, null, ex);
    } catch (DOMUnsupportedException ex) {
    Logger.getLogger(Main.class.getName()).log(Level.SEVERE, null, ex);
    }

    }

  6. Please advise on how to save encoded image into image file.

    I get error ‘This is not a valid bitmap file’ when I try to open this file.

    My code:

    File imageToFile = new File(“c:/Temp/saved.png”);
    imageToFile.createNewFile();

    //Save into To File
    byte[] bytes = {value of hidden field}.getBytes();
    FileOutputStream fos = new FileOutputStream(imageToFile);
    fos.write(bytes);
    fos.flush();
    fos.close();

    Thank you in advanced.

  7. Please disregard my previous comment.

    I realized that we need to use decoding functionality like:

    boolean created = Base64.decodeToFile({value of hidden field}, “c:/Temp/saved.png”);

    Thank you for your help. This is great and very very useful for help desk support applications.

    Oleg

Comments are closed.