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