Fixing the Image Upload widget

The Image Upload widget featured here is a freeware widget by Model Concept which allows you to upload an image to ImageShack simply by dropping it onto the widget. The result is that the URL is auto-magically saved to your clipboard. The overall experience is pretty slick; it supports audio and Growl notifications as well as URL shortening with help from TinyURL ... at least it used to. Read on for my journey from widget woes to uploading bliss.

At some point several months ago, dropping an image onto the widget resulted in a never-ending spinner of terror that teased the user with hope that someday the image would be uploaded. This saddened me greatly as I used this widget on a near-daily basis for Tweeting images as well as the occasional post to my blog. My only real "work around" was to get an Image Shack account and actually upload images through the site. Not fun.

Recently, I became tired of uploading images manually and then hopping over to an URL-shortener to make the image Tweetable. I did some digging and after finding nobody else that was as distraught as I about not being able to use my favorite widget, I decided to give Image Shack's image uploading widget a try. Unfortunately, the results were less than stellar. There was no option to shorten the URL and the text that was copied to the clipboard had "-n " prepended to the beginning of the URL! This was a struggle because I couldn't just copy the output I had to actually format the output before it was even usable.

And this is what brings us to today. Rather than taking "-n " for an answer, I figured I would get my hands dirty. In Image Shack's widget I found a stray "-n" flag for an echo call which is what was fudging my output. Success! Given how easy it was to fix the Image Shack widget I decided to poke around in the Image Upload widget to try and figure out what was holding up the widget during the upload.

What I found was a method "widget.system()" that was used to run Terminal commands within a widget. Image Upload was using this method to send the image's address to TinyURL prior to copying it to the clipboard. Well, as it turns out the command was hanging due to changes in the format of the HTML that is output from TinyURL. After fixing the command in the widget.system() method and saving the updated imageupload.js file I restarted Dashboard to test and everything worked wonderfully!

I do not want to distribute anyone else's code so instead I will tell you the steps to fix the widget on your own! Besides, learning is fun and hopefully this will be a good experience.

1. Navigate to the Library folder in your Home directory and from there go to the Widgets directory (~/Library/Widgets).
2. If you have the widget installed you should see a file named "Image Upload". Right-click on this file and choose "Show Package Contents"
3. The folder that opens contains the file imageupload.js which is the one we want to edit.
4. In your text editor of choice navigate to line 287, it should begin with "output = "
5. Comment that line out by placing "//" at the beginning and then insert a new line directly below it.
6. In the new line paste the following text:
"output = widget.system( "/usr/bin/curl -s \"http://tinyurl.com/create.php?url=" + str_ImgURL + "\" | /usr/bin/awk -F\\\" \'{ print $2 }\' | /usr/bin/grep http | /usr/bin/awk \'NR==12{print $1}\'", null ).outputString;"
7. Save the file and you are done.

Now all you have to do is re-add the widget to your Dashboard and you will be in easy image uploading bliss. I have already contacted the creators of the widget in hopes that they will release an update that includes this fix; in the interim this works perfectly. Feel free to drop Model Concept a note if you'd like them to release an update as well.
Share