Using media-upload.php to upload mp3 via custom fields

Question

I'm trying to use the Thickbox file upload dialogue with a custom field to allow the user to upload an mp3. What I want to do is to grab the URL of the uploaded mp3 and save it as postmeta (saving the data when I've got it isn't a problem, but getting what I need is!).

I've got the code to make this work with an image

 jQuery(function($){

var formfield = null;

$('#rps_upload_mp3').click(function() {
    $('html').addClass('Image');
    formfield = $('#rps_mp3_url').attr('name');
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
    return false;
});

window.original_send_to_editor = window.send_to_editor;
window.send_to_editor = function(html) {

    var fileurl;

    if( formfield = !null ) {

        fileurl = $('img', html).attr('src');
        $('#rps_mp3_url').val(fileurl);
        tb_remove();

        $('html').removeClass('Image');
        formfield = null;

    } else {

        window.original_send_to_editor(html);

    }

}

 });

Obviously the line that reads fileurl = $('img', html).attr('src'); will only get the src of an image, not an mp3, but I can't figure out where the script is grabbing the source of this image from and I don't know how to target the uploaded mp3.

Thanks in advance!

Answer 1

The fileurl should look like this:

fileurl = $('a', html).attr('href');

It's a pretty simple fix. I would do some validation on this:

if(/\.mp3\b/.test(fileurl)){
    //Do something awesome
}else{
    alert('The file you selected is not an MP3.');
}

Cheers!

Answer 2

File urls are returned as a single anchor tag as opposed to images which are returned as an anchor that contains an image tag.

So to reference a file url in wordpress file uploader, you use:

$(html).attr('href');

Then you can use Brian Fegter's response to check the file type.