Reputation: 2213
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
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
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();
}
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "showImage", "showImage('" + myLink + "');", true);
Upvotes: 5
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
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