How to remove uploaded attachment by clicking a button

Question

I'm implementing Asp.net Core to my project. In my create razor view, I have to upload file/s which works correctly. I also have a button with id="attachmentremoval" in the razor, by clicking on it, the attachment should be removed which I couldn't be successful to do it till now. Here is what I have tried till now.

<div class="row">
    <div class="col-md-12">
        <form asp-action="Create" method="post" enctype="multipart/form-data">
 <div class="form-group mt-3">
                <label for="files" class="custom-file-upload">
                    <i class="fa fa-cloud-upload"></i>select file
                </label>
                <input id="files" name="AttachFile" type="file" style="display:none;">
                <span asp-validation-for="FileName" class="text-danger d-block mt-1"></span>
                <button id="attachmentremoval">
                    remove
                </button>
            </div>
   </form>
    </div>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script>

    $('#files').change(function () {
        var arr = $('#file')[0];
        var i = $(this).prev('label').clone();
        var file = $('#files')[0].files[0].name;
        console.log('file:' + i);
        $(this).prev('label').text(file);


$("#attachmentremoval").on("click", function () {

                /*delete arr.files[0];*/
                $('.custom-file-upload').remove();
    });
    });

</script>
}

I appreciate if anyone could suggest me a solution to remove the attachment and again by clicking the lable it should attach a file.

Does this answer your question? [how to reset ](https://stackoverflow.com/questions/20549241/how-to-reset-input-type-file) — Herii, Jun 25 '21 at 03:02

score 0 · Answer 1 · answered Jun 25 '21 at 02:02

Since the content of your <form> is just the <input type="file" />, You can just reset the form:

function reset_form(){
   $('#form').trigger("reset");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="post" enctype="multipart/form-data" id="form">
  <input id="files" type="file" /><br>
  <button type="button" onclick="reset_form()">Clear File</button>
</form>

Or you can set the value to ""

function clear_files(){
   $('#files').val("");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="post" enctype="multipart/form-data" id="form">
  <input id="files" type="file" /><br>
  <button type="button" onclick="clear_files()">Clear File</button>
</form>

Yiyi You · Answer 2 · 2021-06-25T02:16:01.193

Here is a demo:

View:

<div class="row">
    <div class="col-md-12">
        <form asp-action="Create" method="post" enctype="multipart/form-data">
 <div class="form-group mt-3">
                <label for="files" class="custom-file-upload" id="fileslable">
                    <i class="fa fa-cloud-upload"></i>select file
                </label>
                <input id="files" name="AttachFile" type="file" style="display:none;">
                <span asp-validation-for="FileName" class="text-danger d-block mt-1"></span>
                <input id="attachmentremoval" type="button" value="remove"/>
            </div>
   </form>
    </div>
</div>

js:

  @section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script>
        $("#attachmentremoval").on("click", function () {
            document.getElementById("files").value = null;
            document.getElementById("fileslable").innerHTML = '\n            <i class=\"fa fa-cloud-upload\"></i>select files\n';
        });
        $('#files').change(function () {
            var arr = $('#file')[0];
            var i = $(this).prev('label').clone();
            var file = $('#files')[0].files[0].name;
            console.log('file:' + i);
            $(this).prev('label').text(file);
        });

    </script>
}

result:

How to remove uploaded attachment by clicking a button

2 Answers2