Question

I am facing a really weird problem. I am using swfupload to upload multiple images to the ImageShack server. I am also storing the returned URLs in the database. How do I show the URL returned from ImageShack to the user as soon as I receive it? Is there any way to make swfupload return the URL once upload finishes? Here is the code that I use for uploading images:

$('#swfupload-control').swfupload({  
    upload_url: "<%= upload_url-%>",  
    file_post_name: 'photo',  
    post_params: {"authenticity_token" : "<%= form_authenticity_token %>"},
    file_size_limit : "100024",  
    file_types : "*.jpg;*.png;*.gif",  
    file_types_description : "Image files",  
    file_upload_limit : 5,  
    flash_url : "/flash/swfupload.swf",  
    button_image_url : '/javascripts/swfupload/XPButtonUploadText_61x22.png',  
    button_width : 62,  
    button_height : 22,  
    button_placeholder : $('#button')[0],  
    debug: false  
})  
.bind('fileQueued', function(event, file){  
    var listitem='<li id="'+file.id+'" >'+  
        'File: <em>'+file.name+'</em> ('+Math.round(file.size/1024)+' KB) <span class="progressvalue" ></span>'+  
        '<div class="progressbar" ><div class="progress" ></div></div>'+  
        '<p class="status" >Pending</p>'+  
        '<span class="cancel" >&nbsp;</span>'+  
        '</li>';  
    $('#log').append(listitem);  
    $('li#'+file.id+' .cancel').bind('click', function(){
        //Remove from queue on cancel click  
        var swfu = $.swfupload.getInstance('#swfupload-control');  
        swfu.cancelUpload(file.id);  
        $('li#'+file.id).slideUp('fast');  
    });  
    // start the upload since it's queued  
    $(this).swfupload('startUpload'); 
}) 
.bind('fileQueueError', function(event, file, errorCode, message){ 
    alert('Size of the file '+file.name+' is greater than limit'); 
}) 
.bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){ 
    $('#queuestatus').text('Files Selected: '+numFilesSelected+' / Queued Files: '+numFilesQueued); 
}) 
.bind('uploadStart', function(event, file){ 
    $('#log li#'+file.id).find('p.status').text('Uploading...'); 
    $('#log li#'+file.id).find('span.progressvalue').text('0%'); 
    $('#log li#'+file.id).find('span.cancel').hide(); 
}) 
.bind('uploadProgress', function(event, file, bytesLoaded){ 
    //Show Progress 
    var percentage=Math.round((bytesLoaded/file.size)*100); 
    $('#log li#'+file.id).find('div.progress').css('width', percentage+'%'); 
    $('#log li#'+file.id).find('span.progressvalue').text(percentage+'%');
}) 
.bind('uploadSuccess', function(event, file, serverData){ 
    var item=$('#log li#'+file.id), fetchedfile;  
    item.find('div.progress').css('width', '100%'); 
    item.find('span.progressvalue').text('100%'); 

    var pathtofile='<a href="'+fetchedfile+'" target="_blank" >view &raquo;</a>'; 
    item.addClass('success').find('p.status').html('Done!!! | '+pathtofile); 
}) 
.bind('uploadComplete', function(event, file){ 
    // upload has completed, try the next one in the queue 
      
    $(this).swfupload('startUpload');  
});

There is no inbuilt callback function for fetching the URL of the uploaded image file in the swfupload documentation.

Answer 1

Oh, it was simple. uploadSuccess returns serverData!

.bind('uploadSuccess', function(event, file, serverData){ 
    var item=$('#log li#'+file.id), fetchedfile;  
    item.find('div.progress').css('width', '100%'); 
    item.find('span.progressvalue').text('100%'); 
    fetchedfile = serverData;
    var pathtofile='<a href="'+fetchedfile+'" target="_blank" >view &raquo;</a>'; 
    item.addClass('success').find('p.status').html('Done!!! | '+pathtofile); 
})