The second issue also had to do with the <title> tag. In this case, the HTML did have a title tag but the case was different that what I was looking for. My code was looking for all lowercase characters and the tag in the HTML was in uppercase. My first thought was to do a .toLowerCase() on the HTML code but then all the titles would be in lower case and wouldn’t look as presentable (ex: the size of our planet vs The Size of Our Planet). After giving this some more thought, it seemed using regex would be the cleanest solution. A quick Google search returned this page which said by adding an ‘i’ to the end of my regex, the search would be case insensitive. I gave it a try and it worked like a charm.

Before Code:

After Code:

Uploader 0.2.0

So today after work I decided it was about time to start working on phase two of my Uploader tool. Phase two consists of allowing me to drag and drop an image URL into the app so the app can then download the image to a folder in my server, create a thumbnail of this image, and update the WordPress database with information about the new image. The new image would then show up the next time a person visits my blog. If you notice, there is now a “Pics of Interest” section on the sidebar to the right of the page (similar to what people are doing with the flickr plugin). Every time I drag an image URL into the Uploader, the new image thumbnail will show in that area and if you click on the thumbnail you’ll see the full size image.

It was actually much easier than I originally thought to make this work. Technically, the Uploader already has the drag/drop functionality and already takes in a URL. The only extra AS3 code was a check to see if the URL was an image and if so call the PHP page with a code (I’m passing –@IMAGE@– to know it’s an image – it was just the first thing that came to my head) so then PHP knows this URL should be treated as an image not just a URL. If you remember, phase 1 for the Uploader allows a person to drag/drop a URL into the app so it creates a new link under the “Links of Interest”.

Most of the changes were on the PHP end. The file that handles the request from the AIR app now does a check to see if this URL is an image. If so, it has to download the original image to the local server, make a thumbnail copy of it, and finally update the wp_images table (this is a new table I created for this - MySQL script) in WordPress. I’m using two PEAR packages to do this: HTTP_Request and Image_Transform. The same can be done just as easily without them but I like using PEAR on my projects. Here’s the code that does this (file.txt):

Then I had to add some code to the sidebar.php for my template in WordPress to show the new section “Pics of Interest”. As you read this keep in mind this is just a quick beta and I’ll be doing refactoring later. This is by no means a finished product but it works fine and it’s a good start for anyone who wants to try it out. This is the new code I added to my sidebar.php:

The last thing I had to do was to add the style for my images in the styles.css file and I was done. Make sure your images folder has the proper privileges so you can upload an image into it. The next phase will be allowing me to drag files from my local file system into the AIR app so it’ll upload it to my server. Right now the Uploader only does something when a URL is dropped on it: adds a link if it’s not a image, adds the image if it’s an image.

Question, comments, conerns are always welcome!

Edit:

Uploader Phase 1

Uploader 0.1.0

If you missed the previous post explaining what Uploader is go check it out.

So after having some fun with code I think I’m close to being done with phase 1.  I currently have a working beta (0.1.0) that I’m going to share with you all and explain what I’ve done in case anyone else wants to do something similar.  For the most part this was pretty straight forward.  There were a few hiccups here and there that I’ll try to address in this post. The link to the code will be at the end.

First I looked online for some info on Drag/Drop in AIR and I found these two posts that I used for reference:

• http://www.senocular.com/air/tutorials/dragdropimageviewer/
• http://www.mikechambers.com/blog/2007/11/07/air-example-native-drag-and-drop/

I should have read the comments in those post since they answer the question of using ‘NativeDragManager’ instead of ‘DragManager’.  I had that issue and had to figure out why it wasn’t working.

This is an AIR app made in Flash.  So far I only have one ‘Main’ class taking care of most of the action.  I’ll clean the code up later and comment it but here’s the class so far. Using the ‘NativeDragEvent’, Uploader waits for something to be dragged over it.  When it does, ‘dragEnter’ is called. Usually you can do some validation here to see if this is a file type you want to accept but I just do that later.  Before a file/URL can be dropped you need to call ‘NativeDragManager.acceptDragDrop(object)’. By doing this, you let AIR know that the object is ready to accept the drop.

Once an item is dropped, ‘dragDrop’ is called to see if this is a file or a URL.  If URL, ‘urlDropped’ is called which creates a listener for the loader var and sends the request to the URL that was dropped on the app.  When the request is complete, ‘urlLoaded’ is called.  The reason we are loading the dropped URL is so we can grab the title of that page in between the <title> tag of the html.  This is going to be used as the display name when we insert the new link in WordPress. ‘grabTitle’ does a quick substr and when all is done we do one last request.  I had to make sure to remove the listener on ‘loader’ for ‘urlLoaded’ since later when I make a new listener and request, both the new and old listeners were triggering (so make sure to remove a listener from a loader if you are going to reuse that var with a different event call back).

‘SERVER’ is the constant that needs to by modified to point to the correct PHP page that will insert the link to the WordPress DB.  ’urlLoaded’ finishes by sending two variables to the SERVER page, ‘name’ and ‘url’. After the request is loaded, the ’serverUpdated’ function will display if the process was successful or not based on what is returned by the PHP page.

That’s pretty much it for the AS3 code.  The PHP file is much more light weight.  At first I had PHP request the HTML for the URL and strip out the title but after thinking about it, it makes more sense to put that burden on the client and not the server so I moved the code to Flash.

The PHP code starts out by checking for the two needed variables ‘url’ and ‘name’.  There’s a tiny bit of validation going on, definitely more to come as well as implementing some security features since at the moment anyone can submit variables to this page if they know the URL.  (Before posting this, I decided to add a quick security check for now which will see if the remote IP address matches a couple different valid IP address – such as my home or work PC – and if it does, it will continue executing ) Then we make a DB connection to the WordPress DB. I have a standard DB class I use, just use regular mysql_connect instead (ask if you need help with this). Next is the query to insert the data into the ‘wp_links’ table.  I kept the name default during my WordPress install, so the table name might be different for others. And at last, the query is executed and true is returned. The assumption is if we make it down that far everything worked correctly.  Like I said, I need to add more validation and security but that will be later… maybe phase 2 or 3.

The only issue I’m having now that I can’t seem to figure out is where the WordPress DB tracks what category a link is attached to?  When I log into the WordPress admin area and go to manage links, all the links I’m inserting using this method don’t show anything under ‘Categories’. I’m assuming this information isn’t in the ‘wp_links’ table?  If anyone has an answer to this, please let me know.

Here is a zip of all the files (FLA, PHP file, Main class, and AIR xml).  Make sure to edit the ActionScript ‘SERVER’ const and DB info in the PHP file.

* Quick side note, I need to give credit to my fiance Ashley who created a quick graphic for me to use last night. Visit her site to see some of her work.

EDIT:

I forgot to mention I made some edits to the Uploader-app.xml file. These settings were to remove the system chrome and make the app window transparent. More information about these settings can be found at help.adobe.com.

Uploader Phase 2 complete

The Uploader (yeah I know, I’m very creative) is going to do all the above for me. This will be a app I can keep running on my desktop somewhere and when I need to upload a file or link I can just drag it over and drop it in. The tool will then figure out what kind of item was dropped in and what to do with it.

Phase 1 will handle the links. The way the tool should work for links is the following.  I visit a page that I find interesting and want to add to the ‘Links of Interest’.  Instead of logging into WordPress to create it, I highlight the link from the address bar of the browser, drag it over to the app, and drop it. Now the app needs to figure out the <title> of that page to use as the name since we need a name and url to create a link. Once it has that, the tool will send the information to a PHP page which will do an insert to the links table in the WordPress DB.  

Phase 2 will deal with images and files. I may break phase 2 into two since I may do some stuff differently with images versus other files.  I’m thinking I may want to upload images, create a thumbnail, and insert to a DB to display in the front page the same way some people do with their flickr images. Other files I would just upload and store somewhere else.  I’ll give this more thought when I get to it.

I’m going to be writing the tool in Flash CS3/AIR with PHP in the backend using the current WordPress MySQL DB.  Stay tuned for updates!

EDIT:

Uploader Phase 1 completed 
Uploader Phase 2 completed