How to remove the uploaded image on click of the remove button

[Ishan Shah]

Hello!
I am working on an image upload task in which I want to remove the uploaded image on click of the remove button

[Keerthana Rajendran]

Hi Ishan, 

 

Thanks for contacting Syncfusion support.  

 

We suggest you to use ejUploadBox for image upload where we have an in-built option to delete the uploaded file. Once the file is uploaded, you will get a delete icon as shown below to remove the uploaded file 

 

 

 

On clicking this delete icon, the file will be deleted from the saved location. Delete action is performed from RemoveUrl controller action. Refer to the following code 

 

<div class="posupload"> 

                @Html.EJ().Uploadbox("UploadDefault").SaveUrl(@Url.Action("SaveDefault")).RemoveUrl(@Url.Action("RemoveDefault")) 

  </div> 

  public ActionResult RemoveDefault(string[] fileNames) 

         { 

             foreach (var fullName in fileNames) 

             { 

                 var fileName = Path.GetFileName(fullName); 

                 var physicalPath = Path.Combine(Server.MapPath("~/App_Data"), fileName); 

                 if (System.IO.File.Exists(physicalPath)) 

                 { 

                     System.IO.File.Delete(physicalPath); 

                 } 

             } 

             return Content(""); 

         } 

 

The above code can also be used on separate button click action for deleting the files in corresponding path.  

 

We have attached a sample for your reference in the following link 

 

https://www.syncfusion.com/downloads/support/forum/162190/ze/Delete_uploaded_file2106099049 

 

Refer to the following links for more details on Button and UploadBox controls. 

 

https://help.syncfusion.com/aspnetmvc/button/getting-started 

 

https://help.syncfusion.com/aspnetmvc/uploadbox/getting-started 

 

http://mvc.syncfusion.com/demos/web/upload/default 

 

Please let us know if you need further assistance.  

 

Regards, 

Keerthana. 

[will]

On your computer, go to photos.google.com.

The point at the item you want to delete. At the top left, click Select.

At the top right, click Delete. Move to trash.

Regards,

Will