jQuery & WordPress Media Manager Question

jQuery & WordPress Media Manager Question

I am looking for some help around jQuery and Wordpress.  I have managed to get the default Wordpress media upload/manager working in a custom plugin I have written.  Basically the plugin is a custom post page that allows users to post fitness updates to a fitness blog I run.  I wanted to give users the ability to upload  GPX and image files to their post. Using the default Wordpress media upload/manager made the most sense.  After looking around the web it was pretty easy to implement but I am stuck on one part with the jQuery which I am the least familiar with.  I am hoping that someone can get me pointed in the right direction. Here is the code that I have working up to a point right now.

In my custom post form I have image upload input field and button. Pretty straight forward HTML here.

  1.     <label for="upload_image">
        <input id="upload_image" type="text" size="36" name="upload_image" value="" />
        <input id="upload_image_button" type="button" value="Upload Image" />
        <div style="font-size:10px;">Upload a GPX file to be added to your fitness update.</div>

When the Upload Image button is clicked the default Wordpress media upload/manager launches in thickbox.  I can upload the necessary file without issue.  All controlled by Wordpress.  Now the jQuery I am using was originally written for image uploads. It essentially pastes the uploaded image URL back to the form and into the text field from the above HTML form field.  I am new to jQuery and this is where I need help.  The jQuery to copy the image URL to the form is as follows and it works as long as I am using an image.

  1. $('#upload_image_button').click(function() {
         formfield = jQuery('#upload_image').attr('name');
         tb_show('', 'media-upload.php?TB_iframe=true');
         return false;
        window.send_to_editor = function(html) {
         imgurl = $('img',html).attr('src');


I understand what is happening here. Now I need to change this part....

  1. imgurl = $('img',html).attr('src');
If the file I have uploaded and requested to be sent back to my form text field is an image file then all works fine. But the file I am letting users upload is a GPX file and not an image file. ( GPX is essentially a XML formatted file that contains GPS data).  When I upload a GPX the src (URL) is not sent back to the form.  I know why since the file uploaded wouldn't have a 'img' tag or the attribute of 'src'.  But I not sure what it would have for something other than an image file. Where does jQuery get that from?

I hope this is clear enough.

    • Topic Participants

    • husar