Updating images using upload file in ASP.MVC 4

Question

I have 30 images and next to them there is a upload button.

When you select new image and press update, it should delete the old image and save the new image with the same name and path.

I do this with:

string path = "~/Pics/Image1.jpg";
System.IO.File.Delete(Server.MapPath(path));
uploadfile.SaveAs(path);

It works,i can see the change in my folder where i keep all of my images, but in the browser i see the old image and i need to delete my cache in order to see the new image.

Is there any way i can update my images and show the new images without deleting cache from the browser?

score 3 · Answer 1 · edited May 23 '17 at 11:55

You need change http header Last-Modified to browser identify change image and download new image. Your response apparently is correct.

var headerValue = Request.Headers['If-Modified-Since'];
if (headerValue != null)
{
    var modifiedSince = DateTime.Parse(headerValue).ToLocalTime();
    // Insert date of your file change
    if (modifiedSince >= dateOfFileChanged)
    {
        return new HttpStatusCodeResult(304, "Page has not been modified");
    }
}

// page has been changed.
// generate a view ...

// .. and set last modified in the date format specified in the HTTP rfc.
Response.AddHeader('Last-Modified', dateOfFileChanged.
                                ToUniversalTime().ToString("R"));

This code is extracted from this question Last-Modified Header in MVC .

A proper HTTP caching mechanism is definitly better than using a random number in the URL. Got my vote. — TheNameless, Aug 07 '12 at 13:36

score 2 · Accepted Answer · edited May 23 '17 at 11:55

This is a browser caching issue as you suspect. What you can do is add a query string value or something along those lines so that the browser will have to reload the file.

The end result would be image.jpg?image=randomNumber

I usually do this through javascript and you can use generating-random-numbers-in-javascript-in-a-specific-range to help you figure that out.

Now just as a note you are only adding the querystring to the source of the image tag just in case I was not clear.

Updating images using upload file in ASP.MVC 4

2 Answers2