How can I *make* this image refresh after it is uploaded

Question

I am permitting administrative staff on an ASP.NET web site to upload pictures of themselves for display to the users of the site. It isn't hard: just use basic file uploading controls:

<img src="<%#ImageFile%>" border='0' width="150" alt="" height="150" /> <-- Displays the image
<br />
<br />
Upload Picture: <input id="myFile" type="file" name="myFile" runat="server" size="60" />&nbsp;&nbsp;
<asp:button id="DoFileUploadBtn" Height="24" runat="server" Text="Upload" onclick="DoFileUploadBtn_Click"></asp:button>

The picture is named using the ID of the staff member plus ".jpg". So the resulting image for staff with an ID of 1 is 1.jpg. This is displayed using the tag above.

The first time someone uploads an image it works fine. However, if they change the image then the old one is deleted, the file is uploaded correctly and the page is refreshed. However, the browser still shows the old image. I have to manually hit the refresh button in the browser to get the new image to display because, obviously, the browser thinks that the image named "1.jpg" on this particular page must be the one it has stored.

I do use an OutputCache tag with NoStore and Duration="1" to (try to) ensure that nothing on the page is getting cached but to no avail:

<%@ OutputCache NoStore="true" Duration="1" VaryByParam="none" Location="none" %>

Thus the question: what do I need to do to ensure that the new image is shown in this scenario? I don't want to rename the images! There are a number of places that count on the image being named after the staff ID.

Answer 1

The simplest and most reliable way is to add a querystring to the url of the src attribute that contains a version number. You could use an encoding of the date/time that the image was uploaded, or the last changed date/time of the image file on the filesystem.

So the attribute would be something like

src="<%#ImageFile%>?v=<%#ImageFileLastChangedDateTime%>"