Keeping image preview after POST action in MVC

Question

I am using a file API to preview the profile image in client side before uploading in ASP.NET MVC. However, the problem is that the image preview is lost after the post action and the default image is returned when there is a validation error.

I would like to retain the previous image preview along with the validation error message if there is validation error. How could this be done?

Problem:
The problem is due to the reason that input file type is being cleared after validation. So, the file api cannot repopulate the image because there is actually no file exists after validation. So, I guess this question can be simplified to how to retain input type=file value after validation?

Answer 1

You need to do a few things:

Change the model so that it has two new properties:

• ChangeImage : this should be bound to a checkbox that allows the user to provide a new image
• ImagePresent : this indicates that the user already posted an image before (in a previous POST)

Change the actions of the controller in this way:

• when the user gets the form for the first time, ChangeImage should be true, so that the user can choose a new file, and ImagePresent should be false, so that the Razor templates knows that there is no image on the server to be shown to the user
• when the user does the post:
  • if he checks ChangeImage , and provides a file image, keep it on the server, for example on a file, so that it can be shown to the user later. If there are validation errores, return the user a view with the model with the values ChangeImage = false , and ImagePresent = true
  • if he does not provide an image, and there was an image from a previous post, set ImagePresent to true, and ChangeImage to false. In this way, it will be shown using the razor template.
  • if you want it, you can allow the user to delete the image by marking ChangeImage and choosing no file, or using a new RemoveImage property in your view model

Change the razor template: * Add a checkbox for ChangeImage , so that it allows the user to specify a new image file (or specify an empty file to delete it). You should ideally add some JavaScript code to show/hide the file input control. If the user wants to add an image, he has to check ChangeImage and choose the new file * optionally, add a checkbox for RemoveImage which is only shown if ImagePresent is true * Add an <img> which is only shown if the ImagePresent is true

If you do so, the user will have to upload the image only the first time, unless he wants to remove or change it. And you have it available in the server to show it.

The idea is to keep the image on the server, and inform the template if it's available or not. Remember that, by security, you cannot specify the file name of a file input control in the browser, so you must use alternative controls, as explained.

Answer 2

Use Ajax Submit method submit, below is the sample code...

@using (Ajax.BeginForm("/SaveDetails", "User", 
    new AjaxOptions { UpdateTargetId =   "divSaveUsers", InsertionMode = InsertionMode.Replace, 
    OnSuccess = "onUserSaveSuccess", OnFailure = "onUserSaveFailure", HttpMethod = "POST" },
    new { @autocomplete = "off", @id = "frmuserdetails" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)   
    <input type="button" value="Save" id="btnSaveUserData" />
}

<script>

   $("#btnSaveUserData").click(function (event) {
        if ($("#frmuserdetails").valid()) { 
           $("#frmuserdetails").unbind("submit").submit();    
        }
   });
</script>

Please add reference of jquery.unobtrusive-ajax.js if it is not there.

Let me know if you face any issues.

Thanks

Raviranjan