when page load then shows error
Object reference not set to an instance
What's wrong with the code?
HTML:
   <div class="col">
     <label for="lblPartyName">Image File</label>
         <div class="col-4">
           <img src="@Url.Content(Model.imagePath)" style="margin:10px; border:solid 1px" height="20" width="20" id="ImagePreview" />
           <input type="file" name="imageFile" accept="image/jpeg,image/png" onchange="ShowImagePreview(this,document.getElementById('ImagePreview'))" />
         </div>
     </div>
jQuery/javascript
<script>
    function ShowImagePreview(ImageUploder, previewImage)
    {
        if (ImageUploder.files && ImageUploder.files[0])
        {
            var reader = new FileReader();
            reader.onload = function (e) {
                $(previewImage).attr('src', e.target.result);
            }
            reader.readAsDataURL(ImageUploder.files[0]);
        }
    }
</script>
Model
[NotMapped]
    public HttpPostedFileBase imageFile { get;set; }
    public string imagePath {get;set;}
    public Quotation()
    {
        imagePath = "~/AppFiles/Images/Default.png";
    }
 
    