Many’s the time I’ve surfed the vast wonders of the cybernetic ocean and wondered, “Wouldn’t it be nice to have this bit of coral back home, resting peacefully on the mantelpiece?”. Well, perendinate no longer! I present to you my first Firefox add-on, an add-on that lets you upload images you see on webpages directly to your website. Let me explain. If I see an image I like or wish to re-post on my blog, I have to do the following:
- Right click on image
- Save to hard drive
- Fire up an FTP client, Filezilla in this case
- Connect to my FTP server
- Load the directory with the downloaded image in the left pane, and the appropriate FTP directory in the right pane
- Upload the file
My add-on automates these steps. Since I don’t know how to use Javascript to upload a file to an FTP server, the script calls a PHP script which does the heavy lifting. I repeat that again: you must have a PHP-enabled webserver to run this add-on successfully. It doesn’t need to be a hosted one, I just run apache on my box and point the javascript to localhost. More detailed instructions are at the bottom. First, we look at how it works.
If you’re on some random site and think you want an image for your personal post or to share with others without being a leech on the original host, you right click on an image to see the context menu augmented by the “Upload To FTP” sub-menu.
Select the first option, “Images”. The second menu, “Fav 2″ can be customized to whatever you want, if you’re so inclined, but it’s mostly there to show that other options can be added. If you right-click on a non-text element the context menu is still augmented. I followed the Mozilla instructions but wasn’t able to get the sub-menu to not show up on non-image environments. If anyone figures it out after looking at my code, please drop me a line.
If you try to upload the non-image element, you get an error message stating that non-images cannot be uploaded at this time.
Finally, we check the folder on my website where the images were sent to. If you try to add a file with the same name more than once, it increments the file name by the next digit. I don’t know if this will be useful, but I have often come across several image files with the same name and different content (think Google image search for: Canada) and I’d hate to see them overwritten and end up being the same file. We see:
Here is the zip file containing both the XPI installer for the Firefox add-on, and the imgupload.php file. You can install the add-on by opening it with Firefox (File -> Open File). I’ll submit it to the Firefox add-on repository soon.
As for the PHP file, note that it does no error-checking whatsoever. Use it at your own risk. You’ll need to fill in parameters such as the FTP server name, login, password and upload folder. Once that’s done, host it in the root of your webserver’s public HTML directory and you’re done. If you host it in any other location, such as a subfolder or whatnot, then you need to update the “overlay.js” file in your Firefox profile’s extensions/uploadtoftp@viren.kumar/content folder.
Enjoy, and let me know if this is useful for you or if you’d like to see any upgrades or features.