function will not return a value

Question

I'm trying to write a file upload function that will return either a true or false after it uploads the file. The only return I can currently get is undefined. I have tried a few variations of the code, but I can't figure it out. I believe it's a latency or scope issue, but not really sure. Take a look and tell me what you guys think.

HTML

<div id="add-form"> 
    make : <input type="text" id="make" name="make" />
    type : <input type="text" id="type" name="type" />
    caliber : <input type="text" id="caliber" name="caliber" />
    cost : <input type="text" id="cost" name="cost" />
    description : <textarea id="description"></textarea>
    <form id="image-form">
        image : <input type="file" id="image" name="image" />
    </form>
    <button id="add-item">ADD ITEM</button> 
 </div>

JQUERY

$(function()
{
    $('#add-item').click(function()
    {
        console.log(uploader());
    });
    var uploader = function uploader()
    {
        var iframe = $('<iframe name="postiframe" id="postiframe" style="display:none" />');
        $("body").append(iframe);
        var form = $('#image-form');
        form.attr("action","hub.php?handler=image");
        form.attr("method","post");
        form.attr("enctype","multipart/form-data");
        form.attr("encoding","multipart/form-data");
        form.attr("target","postiframe");
        form.attr("file",$('#image').val());
        form.submit();
        $("#postiframe").load(function()
        {
            var _frame = $("#postiframe").contents().find('body').html();
            var obj = $.parseJSON(_frame);
            if(obj['status']==true)
            {
                return true;
            }
            else
            {
                return false;
            }
        }); 
    }
});

Answer 1

The solution is you should implement a callback pattern to deal with the async nature. Here is is oversimplified.

var uploader = function(callback) {

    $("postiframe").load(function () {
        // success
        callback(true);
    });
};

Usage

uploader(function (success) {
});

Answer 2

The problem is that you're returning a value from your ajax callback

$("#postiframe").load(function() {
     // ...
     return true;

By the time this line of code has been reached, the original function has already terminated, returning nothing, which of course evaluates as undefined

var uploader = function uploader()
    {
        var iframe = $('<iframe name="postiframe" id="postiframe" style="display:none" />');
        $("#postiframe").load(function()
        {
            var _frame = $("#postiframe").contents().find('body').html();
            var obj = $.parseJSON(_frame);
            if(obj['status']==true)
            {
                //function has already ended by this point!
                return true;
            }
            else
            {
                //function has already ended by this point!
                return false;
            }
        }); 
        //you need to return something HERE 
    }

---

I'd say your best bet would be to pass in two callback functions, one to be run if the uploads succeeds, and the other if it fails. This won't get you to the point where the function will return true or false based on the result of the upload, but it will allow you to specify code to be run based on whether or not the upload is successful

var uploader = function uploader(successCallback, failureCallback)
    {
        var iframe = $('<iframe name="postiframe" id="postiframe" style="display:none" />');
        $("#postiframe").load(function()
        {
            var _frame = $("#postiframe").contents().find('body').html();
            var obj = $.parseJSON(_frame);
            if(obj['status']==true)
            {
                if (typeof successCallback === 'function')
                    successCallback();
            }
            else
            {
                if (typeof failureCallback === 'function')
                    failureCallback();
            }
        });  
    }