As the web matures,  certain common sense practices become best practices.  For example, it is common sense to realize that people have conversations around topics. Online business conversations around topics may center around a specific event or a specific transaction. Being able to compose and view messages, files and to do lists related to this topic all in one place is very powerful. In fact, we’d say it’s best practice as well as common sense, and we have been applying this best practice very successfully for our clients.

One of our clients experienced a lot of frustration with a web form of this kind, though. This client’s critical business conversation was about investments. On the website we developed, each and every investment in the portfolio  has a dashboard that allows messages, files and to-dos to be associated with the investment. We can resize graphic files and display them on the screen as well. It combines efficiency and attractiveness, keeping all the data on the topic readily visible.

Many of these graphics came from Excel, since like most financial shops this client’s is full of Excel wizards. Here was the cumbersome process to get an Excel graph into this nifty web system:

• copy the image
• paste into a program like MS Paint or Adobe Photoshop
• save the image
• upload the image

Lots of steps. Since they performed this task so often,  it became frustrating. What would be the ideal ? Copy and paste! Copy the chart in Excel and paste it into the web upload form. In the highly technical post below, we share how we conquered the security issues around sharing your local clipboard with your web browser so that a painful process became a breeze. You can also cut to the chase and go straight to the demo.

Technical Implemetation of Clipboard Copy – Web Form Paste

Years ago you could use Javascript’s object.getData() method with a data type of “Image.” You could set the object to ClipBoard, copy and paste, and browsers allowed it.

However, modern web security standards no longer allow Javascript to interact with any operating system’s clipboard. You can still override the behavior of your browser and allow clipboard access to websites, but this can leave your machine open to hacks, viruses, etc… It counts as risky behavior on the part of your machine.

What’s more, most users are not that savvy with editing browser profile policy files or advanced options. And many offices forbid overrides anyway. So that’s not really a user-friendly solution.

Where does that leave us with this request? Client-side programming still has to be the solution, but normal scripting is not a possibility. Basically, what we need to do is mimic the usual copy, paste, save and upload routine behind the scenes for the user. In my research I found two solutions:

1. Write an ActiveX control that will grab the clipboard image, create a file on the clients machine and then upload it.
2. Write a Java applet that will grab the clipboard image data, create jpeg encoded image data and send that data to a server side script for processing.

The ActiveX control required creating a file on the client’s computer. That’s a solution that could lead to more problems than it solves. Admittedly, I prefer Java anyway. So here’s how we did it…

First, we needed an applet that, when triggered, would read image data from the client’s clipboard and create a jpeg encoded image — just like most of the pictures you save on your computer.

You can download all the code for that applet at Clevertech’s Clipboard to BrowserCopy-Paste Solution.

Without having to do too much heavy lifting I was able to find open source Java code on the net that grabbed image data from the clipboard and created a jpeg encoded image. Unfortunately, they all seemed to be written for php and were sending un-encoded data streams to the server. I was writing for a ColdFusion server, and I quickly found out that ColdFusion did not like the data being sent — and promptly crashed the page. Obviously, some tweaks were needed.

In the end, I opened a connection to the server from the applet, mimicked a form-data submit with a content-type: image/jpeg and sent the image’s data base64 encoded (which ColdFusion liked). The applet then waits for a filename to be returned.

After that we needed a catch or action script on the server to process the image data and return a filename. In the code you will see “shootImage.cfm.” Basically, we get the http request data (form-data sent) and parse out the data beginning after the base64 transfer encoding tag as follows:

• Create a unique file name, since we have multiple users.
• Write the data in binary to the file.
• Finally, set a session variable with the file name created for possible future use and output the file name for the java applet to grab.

Lastly, we need a user interface page that is going to load the applet, call it on when the user hits “paste,” and display and upload the pasted image. You can see the full contents of this page in the code linked above.

There will still be security issues denying the applet access to the clipboard if the jar (the executable file) is not signed. We have included a signed jar with the code that uses Clevertech’s signature.

In the end the clients got their request and we now have a new cool little tool in our arsenal. This code has been tested and is in use by several of our clients in one form or another. Try it out yourself, if you like. If you have any issues — or don’t have the time or desire to try the do-it-yourself route — contact us, and we will help.

The key here is the Return On Investment. At Clevertech, we put ourselves in your shoes and look to maximize efficiency so that your company gets the most out of its staff resources. This tool is a great example of pushing the technology envelope to allow company staff to do more with less.

Permalink  |  Published in Uncategorized  |  View Comments