Filed under: Internet Tools
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.
- Navigate to the Library folder in your Home directory and from there go to the Widgets directory (~/Library/Widgets).
- If you have the widget installed you should see a file named "Image Upload". Right-click on this file and choose "Show Package Contents"
- The folder that opens contains the file imageupload.js which is the one we want to edit.
- In your text editor of choice navigate to line 287, it should begin with "output = "
- Comment that line out by placing "//" at the beginning and then insert a new line directly below it.
- In the new line paste the following text:
- Save the file and you are done.
- "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;"

![TUAW [Cafepress]](http://www.blogsmithmedia.com/www.tuaw.com/media/tuaw-cafepress-promo.png)


Reader Comments (Page 1 of 2)
Tom said 10:14AM on 12-29-2008
Alternatively you could use LocalHostr which is basically the same with out the need for an account. http://localhostruploadr.com/
Reply
doteyes9 said 8:12PM on 12-29-2008
And notice how you're on a mac site, and he's using os x, and how localhostr is windows only.
doteyes9 said 8:13PM on 12-29-2008
woops, my mistake XD sorry
Luke H. said 10:16AM on 12-30-2008
http://www.simon360.com/localhostr/index.php
Check this out-- it's what I use. :D
Arne said 10:24AM on 12-29-2008
Thank you for this, I was praying for an update of this useful little widget for months now :-) Sad the developers didnt notice it themselves. I really could not live without this one any more :)
Reply
itsmeee said 10:58AM on 12-29-2008
I love you! You have no idea how sad this whole thing has made me. I've tried uploading images elsewhere, uploading them via my own webserver, painting an image and sending it via post, pretty much everything. Everything left the nasty taste of work in my mouth though. Thanks so much for fixing this :D
Reply
mingistech said 10:38AM on 12-29-2008
I commented out like 287 and added your supplied code... didn't work for me.
Tried it twice. Using TextMate. Once saved the Widget is unusable and dragging images results on no action at all.
Reply
jason said 10:46AM on 12-29-2008
it wasn't line 287 for me, it was line 244. I was using Coda. Also Does anyone else get this in the link automatically copied to your clipboard?
"-n http://tinyurl.com/1234" I get that "-n" all the time
Reply
Aron Trimble said 11:52AM on 12-29-2008
It looks like you are using version 1.0 of the widget. Download version 1.1 and apply the changes detailed above.
Allan said 11:29AM on 12-29-2008
The widget was updated with this fix earlier this year here: http://macthemes2.net/forum/viewtopic.php?id=16780285
Reply
Aron Trimble said 11:55AM on 12-29-2008
Actually the "fix" was the release of version 1.1 which removed the "-n" text from its output; while this is fixed in Image Upload it is not fixed in ImageShack's widget.
If you read the most recent post (Oct 9, 2008 7:34 pm) you will see that in version 1.1 the issue I describe above is present.
Allan said 12:03PM on 12-29-2008
I feel dumb. I will go do the fix for my copy of the widget. Thanks, Aron.
Max said 11:49AM on 12-29-2008
How is this widget supposed to work? I installed the updated widget. Select an image on my desktop, activate Dashboard. I am unable to drag my image into the widget, or drag my image at all. Am I missing something?
Reply
Aron Trimble said 11:58AM on 12-29-2008
To use the widget select the image you want to upload in Finder (click and hold on the file's icon). Then activate Dashboard (still holding the mouse button down) and drag the image on top of the widget. When you see the dashes crawling around on the widget you are ready to drop the file onto the widget (let go of the mouse button).
Hope this helps!
Nuno Sousa said 11:59AM on 12-29-2008
I like h4xr (http://h4xr.org/). It allows you to upload any file type (sort of like rapidshare) but it uses the same widget. Very handy
Reply
PowerLlama said 1:11PM on 12-29-2008
I second h4xr. Great widget, that I think has the same look as this one. Like the exact same.
Olligarski said 1:46PM on 12-29-2008
Corners more rounded and no prefs!
Olligarski said 1:48PM on 12-29-2008
Image Upload will not do png's and I can't get h4xr to do it either!
Tried uploading the new IU with h4xr but no go on that as well:-/
Reply
Olligarski said 2:07PM on 12-29-2008
Cant upload webloc's with h4xr either!
Only url's dragged directly from location field. Silly strange.
Olligarski said 6:45AM on 12-30-2008
For some reason png-upload now works with h4xr!