How to change the src of an existing image by using UploadBox?

Description

You can change the source of image by using the complete event of UploadBox control.

Solution

Initially, you can render the image tag with the source of image as illustrated in the following code example.

CSHTML

<div>
    <img id="theimage" src="~/Image/car.png" alt="SrcImage"/>
</div>

Declare the complete event in UploadBox control as illustrated in the following code example.

CSHTML

@Html.EJ().Uploadbox("UploadDefault").SaveUrl("Upload/SaveDefault").RemoveUrl("Upload/RemoveDefault").ClientSideEvents(e => e.Complete("complete"))

The complete event triggers when the file upload progress is completed. To change the img tag src by a selected image from the UploadBox, use the complete event in the script section as illustrated in the following code example.

JS

<script>
function complete(args)
{
$("#theimage").attr("src", "/Image/"+args.files.name);
}</script>

The parameters passed in the argument of complete event is illustrated in the following API reference UG link.

https://help.syncfusion.com/api/js/ejuploadbox