MVC 3 Update uploaded image with same name

Question

I'm stumped on an image issue... heres the lowdown.

In my layout i have an image that acts as a logo... however in the admin view there is the ability to upload a new logo and it simply replaces the current one with the exact same name. After the postback the image does not change on the layout to the updated image even though the updated image is saved. If I refresh the page with ctrl and F5, cache is gone and I can see the new image but I need it to be more automated.

Heres my img tag in the layout

<img src="@Url.Content("~/Content/themes/base/images/Client_Logo.jpg")" id="ClientLogo" alt="" width="227" height="130" style="float: left;" />

Heres the admin View

@using (Html.BeginForm("Admin", "Home", FormMethod.Post, new { @encType = "multipart/form-data" }))
    {
        <fieldset>
            <legend>Logo Management</legend>
            <p>
                <input type="file" name="FileUpload" />
            </p>
            <p>
                <input type="submit" value="Upload" />
            </p>
        </fieldset>
    }

And finally the action

[Authorize]
    [HttpPost]
    public ActionResult Admin()
try
            {
                HttpPostedFileBase file = Request.Files[0];

                if (file != null)
                {
                    var fileName = Path.GetFileName(file.FileName);
                    var path = Path.Combine(Server.MapPath("~/Content/themes/base/images"), fileName);
                    file.SaveAs(path);
                    System.IO.File.Delete(Path.Combine(Server.MapPath("~/Content/themes/base/images"), "Client_Logo.jpg"));
                    System.IO.File.Move(Path.Combine(Server.MapPath("~/Content/themes/base/images"), fileName), Path.Combine(Server.MapPath("~/Content/themes/base/images"), "Client_Logo.jpg"));
                }
                else
                {
                    ModelState.AddModelError("uploadError", "There is a problem uploading the file.");
                }
            }
            catch (Exception e)
            {
                ModelState.AddModelError("uploadError", e);
            }
return View();

What does everyone suggest to do in order to refresh the image in the layout when the view is returned after uploading the image?

Cheers.

Mike Gleason jr Couturier · Accepted Answer · 2012-03-15 18:10:04Z

3

The quickest fix I can think of is displaying your logo with something random so the client would never hit the cache like:

"/images/yourlogo.png?version=123455634"

Replacing 123455634 with something always random.

Since the url of your picture will never be the same, the picture will always be downloaded.

You can mess with the cache headers for this particular file but this is the quickest fix I can think of.

Hope this helps.

EDIT try this:

<img src="@Url.Content("~/Content/themes/base/images/Client_Logo.jpg?version=" + DateTime.Now.Ticks.ToString())" id="ClientLogo" alt="" width="227" height="130" style="float: left;" />

edited Mar 15, 2012 at 18:10

answered Mar 15, 2012 at 15:45

Mike Gleason jr Couturier

9,2064 gold badges44 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bl4kh4k Over a year ago

Tried it but doesn't work... I believe its because the image is in the layout and not the view.

Nick Bork · Accepted Answer · 2012-03-15 18:20:04Z

Well, you could set caching headers on that file NOT to cache in your web.config but that isn't ideal.

How about some jQuery?

In your Layout:

<img src="@Url.Content("~/Content/themes/base/images/Client_Logo.jpg")" id="ClientLogo" alt="" width="227" height="130" style="float: left;" data-src="@Url.Content("~/Content/themes/base/images/Client_Logo.jpg")"/>

In your view that you want to change the image:

<script type="text/javascript">
     $(function(){
          $('#ClientLogo').attr('src',$('#ClientLogo').data('src') + '?t=' + new Date().getTime());
    });
</script>

I believe this would work however I had just went and turned cacheing off in the web.config file... ideally I don't need caching as it won't be used as an internet application, just intranet.

Collectives™ on Stack Overflow

MVC 3 Update uploaded image with same name

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related