Uploader Phase 2 complete!

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):

if($name == '--@IMAGE@--')
{
    // later use unique names?
    $name = substr($url, strripos($url,'/') + 1);
        
    require 'HTTP/Request.php';
    $req = new HTTP_Request($url);
    $req->sendRequest();
    
    $fp = fopen('images/'.$name, 'w');
    fwrite($fp, $req->getResponseBody());
    fclose($fp);
    
    // create thumbnail
    require 'Image/Transform.php';

    //create transform driver object
    $it = Image_Transform::factory('GD');

    //load the original file
    $it->load('images/'.$name);

    //scale it to 100px
    $it->scaleMaxLength(100);

    //save it into a different file
    $tn = substr($name,0,strripos($name,'.')).'-tn.'.substr($name,strripos($name,'.')+1);
    $it->save('images/'.$tn);

    $query = '
            Insert Into wp_images
            Values (null, '.$db->quote($name, 'text').', '.
                $db->quote($tn, 'text').', '.$db->quote($url, 'text').');
}

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:

<div class="block poi">
        <h3>Pics of Interest</h3>
        <?php
                require './uploader/lib/DB.php';
                DB::conn('live');
                $db = DB::getInstance();

                $query = '
                        Select image_file, image_thumbnail, image_origin
                        From wp_images
                        Order By image_id desc
                        Limit 6;
                        ';

                $rs = $db->query($query);
                while($row = $rs->fetchRow())
                    print '<a href="/uploader/images/'.$row['image_file'].'"
                        title="From: '.$row['image_origin'].'"><img
                        src="/uploader/images/'.$row['image_thumbnail'].'" /></a>';
        ?>
</div>

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