I have a Ajaxupload witch i use for uploading images to a database, for the displaying of the image i user a .ashx handler.
Now i have one problem, when i load the page i use the Image1.ImageURL = "~/handler.ashx?ImageId=" + iImageId; in the formload.
The problem is when i upload a new image with a AjaxUpload(See code below) i cannot use the same handler(Because the image url stays the same and the browser doesn`t do anything then) so i made a new handler ImageRefresh. This works fine if i load a new
image for 1 time, but if i want to load a new image it doesn`t show the new image. I use the handler to update a profile image..so the id stays the same.
I`ve tried to use a session variable..but because the script is loaded in the document.ready function, the session stays the same..(Or I'm doing something wrong in the session) Below i will show some examples witch I've tried.
Example 1:
var tmpCount = 0;
$(function () {
new AjaxUpload('#udUploadButton', {
action: 'WIUploadHandler.ashx',
onComplete: function (file, response) {
$("<div><img src='./Images/upload/btndelete.png' onclick=\"DeleteFile('" + response + "')\" class='delete'/>" + response + "</div>").appendTo('#UploadedFile');
},
onSubmit: function (file, ext) {
if (!(ext && /^(jpeg|jpg|png|gif)$/i.test(ext))) {
alert('Invalid File Format.');
return false;
}
$('#UploadStatus').html("Uploading...");
refreshImage();
//var ses = '<%=Session["SESSION_ProImgID"].ToString() %>';
//img.src = 'RefreshImage.ashx?ImageId=' + ses.toString();
}
});
});
function refreshImage() {
var ses = '<%=Session["SESSION_ProImgID"].ToString() %>';
var tmpSes = '<%=Session["SESSION_IMAGEPROFILEREFRESH"].ToString() %>'
if (tmpSes == "2") {
tmpCount = 1;
document.getElementById("MainContent_ucUserDetails_hdSession").value = tmpCount;
$('#UploadStatus').html("file has been uploaded sucessfully");
var img = document.getElementById("<%=this.imgUserProfile.ClientID%>");
img.src = 'udImageHandler.ashx?ImageId=' + ses.toString();
<%=Session["SESSION_ProImgID"] = hdSession.Value%>;
document.getElementById("lblSession").innerHTML = tmpSes.toString();
}
if (tmpSes == "1") {
tmpCount = 2;
document.getElementById("MainContent_ucUserDetails_hdSession").value = tmpCount;
$('#UploadStatus').html("file has been uploaded sucessfully");
var img = document.getElementById("<%=this.imgUserProfile.ClientID%>");
img.src = 'RefreshImage.ashx?ImageId=' + ses.toString();
<%=Session["SESSION_ImgID"] = hdSession.Value%>;
document.getElementById("lblSession").innerHTML = tmpSes.toString();
}
//If i do this the session stays 1 so the image doesn`t refresh
Example: does refresh the image..but only one time, so I'm hoping somebody knows a good solution/workarround..
$(function () {
new AjaxUpload('#udUploadButton', {
action: 'WIUploadHandler.ashx',
onComplete: function (file, response) {
$("<div><img src='./Images/upload/btndelete.png' onclick=\"DeleteFile('" + response + "')\" class='delete'/>" + response + "</div>").appendTo('#UploadedFile');
},
onSubmit: function (file, ext) {
if (!(ext && /^(jpeg|jpg|png|gif)$/i.test(ext))) {
alert('Invalid File Format.');
return false;
}
$('#UploadStatus').html("Uploading...");
var ses = '<%=Session["SESSION_ProImgID"].ToString() %>';
img.src = 'RefreshImage.ashx?ImageId=' + ses.toString();
}
});
});
The problem is when i upload a new image with a AjaxUpload(See code below) i cannot use the same handler(Because the image url stays the same and the browser doesn`t do anything then)
Yes, you are right. I suggest you to use Guid as part of the image file name. It is almost impossible to get the same value.
I`ve tried that already, but the problem is, if i upload the first file, the ajaxupload wil not execute the new query string.
$(function () {
new AjaxUpload('#udUploadButton', {
action: 'WIUploadHandler.ashx',
onComplete: function (file, response) {
$("<div><img src='./Images/upload/btndelete.png' onclick=\"DeleteFile('" + response + "')\" class='delete'/>" + response + "</div>").appendTo('#UploadedFile');
},
onSubmit: function (file, ext) {
if (!(ext && /^(jpeg|jpg|png|gif)$/i.test(ext))) {
alert('Invalid File Format.');
return false;
}
$('#UploadStatus').html("Uploading...");
var SesGuid = '<%=Session["SESSION_IMGGUID"] %>'
var ses = '<%=Session["SESSION_ProImgID"].ToString() %>';
img.src = 'RefreshImage.ashx?ImageId=' + ses.toString() + "&imgguid=" + SesGuid.toString();
}
});
});
I catch the session in the first time..and it works fine, but when i want to upload a new picture...the image has been saved to the database, but it looks like it will not be send to the RefreshImage.ashx..So i`m hoping you know a work arround for this..
From code behind (Init...FormLoad) and set a new session in the imagehandler.ashx and read it in the refreshimage.ashx
But that doesn`t solve the problem..after creating a new session and set that session as new filename the image url stays the same..so it looks that the script can only load a single time(I'm sure that is not the case...But I don`t have a clue how to solve
this)
Do i need to set the new session value in the javascript? If So how? var NewSessionGuid = '<%=Guid.NewGuid().ToString();%>' ?
I cannot run your code here. Anyways, perhaps you can get the point. You generate a new guid and assign it to the
Session as part of the upload file name at each upload process (during save data to database, I guess). This
Session object later can be used to construct the image file name.
So, for each upload, it will actually get a new guid and ready for the url construction.
No matter how much time you spend on coding. Wish you happy coding.
My Technical Blog
The problem is not that the code does generate a new guid..Because the guid is in the image url string
So if you right click the image in runtime, the new guid is in the url string only the new image is not displayed..
I'm using a jquery modal popup form(Strange thing is when i add the image for the first time it does show the image, for the second time it doesn`t show the image..)
Bud i wil try to ad a count in the java script and then add two ashx handlers
if(iCount == 1){
var img = document.getElementById("<%=this.Image1.ClientID%>");
var ses = '<%=Session["SESSION_IMGID"].ToString() %>';
img.src = 'DisplayImage.ashx?imgid=' + ses.toString()
iCount = 2
}
If(iCount == 2){
var img = document.getElementById("<%=this.Image1.ClientID%>");
var ses = '<%=Session["SESSION_IMGID"].ToString() %>';
img.src = 'RefreshImage.ashx?imgid=' + ses.toString()
iCount = 1
}
I hope that the var will keep it value during runtime...If you have a better solution..I'm all ears
The problem is not that the code does generate a new guid..Because the guid is in the image url string
So if you right click the image in runtime, the new guid is in the url string only the new image is not displayed..
So, since the guid has generated by the code. Are you able to identify the url of the image is valid or not? I think it is because the url was invalid, the guid that use to construct the url is not same as the guid use to save the image.
No matter how much time you spend on coding. Wish you happy coding.
My Technical Blog
Clubict
Member
223 Points
195 Posts
image url doesn`t refresh after db update
Dec 11, 2012 10:37 AM|LINK
Hi,
I have a Ajaxupload witch i use for uploading images to a database, for the displaying of the image i user a .ashx handler.
Now i have one problem, when i load the page i use the Image1.ImageURL = "~/handler.ashx?ImageId=" + iImageId; in the formload.
The problem is when i upload a new image with a AjaxUpload(See code below) i cannot use the same handler(Because the image url stays the same and the browser doesn`t do anything then) so i made a new handler ImageRefresh. This works fine if i load a new image for 1 time, but if i want to load a new image it doesn`t show the new image. I use the handler to update a profile image..so the id stays the same.
I`ve tried to use a session variable..but because the script is loaded in the document.ready function, the session stays the same..(Or I'm doing something wrong in the session) Below i will show some examples witch I've tried.
Example 1: var tmpCount = 0; $(function () { new AjaxUpload('#udUploadButton', { action: 'WIUploadHandler.ashx', onComplete: function (file, response) { $("<div><img src='./Images/upload/btndelete.png' onclick=\"DeleteFile('" + response + "')\" class='delete'/>" + response + "</div>").appendTo('#UploadedFile'); }, onSubmit: function (file, ext) { if (!(ext && /^(jpeg|jpg|png|gif)$/i.test(ext))) { alert('Invalid File Format.'); return false; } $('#UploadStatus').html("Uploading..."); refreshImage(); //var ses = '<%=Session["SESSION_ProImgID"].ToString() %>'; //img.src = 'RefreshImage.ashx?ImageId=' + ses.toString(); } }); }); function refreshImage() { var ses = '<%=Session["SESSION_ProImgID"].ToString() %>'; var tmpSes = '<%=Session["SESSION_IMAGEPROFILEREFRESH"].ToString() %>' if (tmpSes == "2") { tmpCount = 1; document.getElementById("MainContent_ucUserDetails_hdSession").value = tmpCount; $('#UploadStatus').html("file has been uploaded sucessfully"); var img = document.getElementById("<%=this.imgUserProfile.ClientID%>"); img.src = 'udImageHandler.ashx?ImageId=' + ses.toString(); <%=Session["SESSION_ProImgID"] = hdSession.Value%>; document.getElementById("lblSession").innerHTML = tmpSes.toString(); } if (tmpSes == "1") { tmpCount = 2; document.getElementById("MainContent_ucUserDetails_hdSession").value = tmpCount; $('#UploadStatus').html("file has been uploaded sucessfully"); var img = document.getElementById("<%=this.imgUserProfile.ClientID%>"); img.src = 'RefreshImage.ashx?ImageId=' + ses.toString(); <%=Session["SESSION_ImgID"] = hdSession.Value%>; document.getElementById("lblSession").innerHTML = tmpSes.toString(); } //If i do this the session stays 1 so the image doesn`t refresh Example: does refresh the image..but only one time, so I'm hoping somebody knows a good solution/workarround.. $(function () { new AjaxUpload('#udUploadButton', { action: 'WIUploadHandler.ashx', onComplete: function (file, response) { $("<div><img src='./Images/upload/btndelete.png' onclick=\"DeleteFile('" + response + "')\" class='delete'/>" + response + "</div>").appendTo('#UploadedFile'); }, onSubmit: function (file, ext) { if (!(ext && /^(jpeg|jpg|png|gif)$/i.test(ext))) { alert('Invalid File Format.'); return false; } $('#UploadStatus').html("Uploading..."); var ses = '<%=Session["SESSION_ProImgID"].ToString() %>'; img.src = 'RefreshImage.ashx?ImageId=' + ses.toString(); } }); });Best regards,
Mark
CruzerB
Contributor
5399 Points
1098 Posts
Re: image url doesn`t refresh after db update
Dec 12, 2012 11:51 AM|LINK
Hi,
Yes, you are right. I suggest you to use Guid as part of the image file name. It is almost impossible to get the same value.
http://msdn.microsoft.com/en-us/library/system.guid.newguid.aspx
My Technical Blog
Clubict
Member
223 Points
195 Posts
Re: image url doesn`t refresh after db update
Dec 12, 2012 03:09 PM|LINK
Hi CruzerB,
I`ve tried that already, but the problem is, if i upload the first file, the ajaxupload wil not execute the new query string.
$(function () { new AjaxUpload('#udUploadButton', { action: 'WIUploadHandler.ashx', onComplete: function (file, response) { $("<div><img src='./Images/upload/btndelete.png' onclick=\"DeleteFile('" + response + "')\" class='delete'/>" + response + "</div>").appendTo('#UploadedFile'); }, onSubmit: function (file, ext) { if (!(ext && /^(jpeg|jpg|png|gif)$/i.test(ext))) { alert('Invalid File Format.'); return false; } $('#UploadStatus').html("Uploading..."); var SesGuid = '<%=Session["SESSION_IMGGUID"] %>' var ses = '<%=Session["SESSION_ProImgID"].ToString() %>'; img.src = 'RefreshImage.ashx?ImageId=' + ses.toString() + "&imgguid=" + SesGuid.toString(); } }); });I catch the session in the first time..and it works fine, but when i want to upload a new picture...the image has been saved to the database, but it looks like it will not be send to the RefreshImage.ashx..So i`m hoping you know a work arround for this..
Best regards,
Mark
CruzerB
Contributor
5399 Points
1098 Posts
Re: image url doesn`t refresh after db update
Dec 12, 2012 11:44 PM|LINK
Well, how do you ensure these variables have new value for each execution?
My Technical Blog
chetan.sarod...
All-Star
65839 Points
11163 Posts
Re: image url doesn`t refresh after db update
Dec 13, 2012 02:35 AM|LINK
Refer this
http://forums.asp.net/t/1196936.aspx/1
http://forums.asp.net/t/1587771.aspx/1
Senior Software Engineer,
Approva Systems Pvt Ltd, Pune, India.
Clubict
Member
223 Points
195 Posts
Re: image url doesn`t refresh after db update
Dec 13, 2012 09:37 AM|LINK
Hi CruzerB,
From code behind (Init...FormLoad) and set a new session in the imagehandler.ashx and read it in the refreshimage.ashx
But that doesn`t solve the problem..after creating a new session and set that session as new filename the image url stays the same..so it looks that the script can only load a single time(I'm sure that is not the case...But I don`t have a clue how to solve this)
Do i need to set the new session value in the javascript? If So how? var NewSessionGuid = '<%=Guid.NewGuid().ToString();%>' ?
Best regards,
Mark
Clubict
Member
223 Points
195 Posts
Re: image url doesn`t refresh after db update
Dec 13, 2012 09:40 AM|LINK
Hi Chetan,
If i do the links you placed, i need to rebuild the complete upload solution...so that is not a option for me..
Thanks any way!
Best regards,
Mark
CruzerB
Contributor
5399 Points
1098 Posts
Re: image url doesn`t refresh after db update
Dec 13, 2012 10:01 AM|LINK
I cannot run your code here. Anyways, perhaps you can get the point. You generate a new guid and assign it to the Session as part of the upload file name at each upload process (during save data to database, I guess). This Session object later can be used to construct the image file name.
So, for each upload, it will actually get a new guid and ready for the url construction.
My Technical Blog
Clubict
Member
223 Points
195 Posts
Re: image url doesn`t refresh after db update
Dec 13, 2012 06:45 PM|LINK
The problem is not that the code does generate a new guid..Because the guid is in the image url string
So if you right click the image in runtime, the new guid is in the url string only the new image is not displayed..
I'm using a jquery modal popup form(Strange thing is when i add the image for the first time it does show the image, for the second time it doesn`t show the image..)
Bud i wil try to ad a count in the java script and then add two ashx handlers
if(iCount == 1){ var img = document.getElementById("<%=this.Image1.ClientID%>"); var ses = '<%=Session["SESSION_IMGID"].ToString() %>'; img.src = 'DisplayImage.ashx?imgid=' + ses.toString() iCount = 2 } If(iCount == 2){ var img = document.getElementById("<%=this.Image1.ClientID%>"); var ses = '<%=Session["SESSION_IMGID"].ToString() %>'; img.src = 'RefreshImage.ashx?imgid=' + ses.toString() iCount = 1 }I hope that the var will keep it value during runtime...If you have a better solution..I'm all ears
Best regards,
Mark
CruzerB
Contributor
5399 Points
1098 Posts
Re: image url doesn`t refresh after db update
Dec 13, 2012 11:41 PM|LINK
So, since the guid has generated by the code. Are you able to identify the url of the image is valid or not? I think it is because the url was invalid, the guid that use to construct the url is not same as the guid use to save the image.
My Technical Blog