CODEWITHSUNDEEP
asp.net-mvc-3
bl4kh4k
bl4kh4k

Reputation: 1440

MVC 3 Update uploaded image with same name

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.

Upvotes: 1

Views: 2964

Answers (2)

Nick Bork
Nick Bork

Reputation: 4841

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>

Upvotes: 1

Mike Gleason jr Couturier
Mike Gleason jr Couturier

Reputation: 9136

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;" />

Upvotes: 3

Related Questions