views:

97

answers:

1

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.

A: 

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); 
     }) 
Shripad K