CODEWITHSUNDEEP
c#asp.netajax
Bruce
Bruce

Reputation: 2213

asyncfileupload show image after upload without refreshing the page

I have been cracking at this for a while now with no luck.

Using asyncfileupload control to upload a file and display the image. The uploading works fine and image is displayed if I reload/refresh the page.

But need to know how I can do this without reloading/refreshing the page.

After reading online posts, I see a recommendation to use scriptmanager but this doesn't work for me:

    protected void FileUploadComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
    {

          .
          .
          .
          .

        ScriptManager.RegisterStartupScript(this, GetType(), "TestAlert",
        "window.parent.document.getElementById('" + img_ProfilePic.ClientID + "').src='" + "http://www.site.com/default.jpg" + "');",
        true);

}

Thank you, Behrouz

Upvotes: 3

Views: 11882

Answers (5)

frank tan
frank tan

Reputation: 141

Code Used:

Upload and Display code

protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e) 

{ 

string strPath = MapPath("~/upload/") + Path.GetFileName(e.FileName); 

AsyncFileUpload1.SaveAs(strPath); 

displayImage.ImageUrl = strPath; 

}

Need to add the following in the client side JavaScript. 

<script type="text/javascript"> 

function uploadComplete(sender, args) { 

var imageName = args.get_fileName(); 

$get("displayImage").src = "./upload/" + imageName; 

} 

</script>

Control to Use AsyncFileUpload:

detail : https://code.msdn.microsoft.com/How-to-upload-an-image-and-c3703a2c

Upvotes: 0

phanindra
phanindra

Reputation: 11

Check this link ,I think so it is use full to you

http://www.aspsnippets.com/Articles/Display-image-after-upload-without-page-refresh-or-postback-using-ASP.Net-AsyncFileUpload-Control.aspx

Upvotes: 1

Shaun3180
Shaun3180

Reputation: 191

After wasting hours before discovering the bug mentioned by user554134, I came up with the following solution that uses jQuery (along with the asyncfileupload control).

  • First get a compiled version of the AjaxToolkit that has the bug fixed, per user554134's link.

  • Add some jQuery to hide/show an image. 

$(document).ready(function () {
            $("#imgConfirmation").hide();
        });

The key point to remember is that the AsyncFileUpload control utilizes an iframe, so you need to have jquery access the parent of the frame when calling your "show" function. Eg:

        function showImage(imagePath) {
            $('#imgConfirmation', window.parent.document).attr("src", imagePath);
            $('#imgConfirmation', window.parent.document).show();
        }
  • In your UploadedComplete event, after saving the file, register the client script to hook into the js function. Eg,
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "showImage", "showImage('" + myLink + "');", true);

Upvotes: 5

Bruce
Bruce

Reputation: 2213

After a few days, that's right, few day of debugging, I found this is a bug:

http://ajaxcontroltoolkit.codeplex.com/workitem/26761

I hope this will save other people some time.

Upvotes: 3

d3v1lman1337
d3v1lman1337

Reputation: 229

You may want to check the JS in your ScriptManager. It looks like you may have an extra ")" at the end of your JavaScript string which could be causing your error.

If you are still having issues, the following link should point you in the right direction for using AsyncFileUpload with an UpdatePanel
http://forums.asp.net/t/1479689.aspx?PageIndex=2

Upvotes: 1

Related Questions